Could someone help me with making my HTML5 heading span across the columns in the table? I want the table to end on the far right with the vertical line appearing at the right end of the table.
Any assistance would be greatly appreciated!
For reference, here is the link to the jsfiddle: https://jsfiddle.net/v1f49gkj/
<head>
<style type="text/css">
body{
font: normal medium/1.4 sans-serif;
}
table{
border-collapse: collapse;
width:40%;
}
th,td{
padding:0.25rem;
text-align: left;
border: 2px solid #ccc;
}
tbody tr:nth-child(odd){
background: #eee;
}
</style>
</head>
<body>
<table>
<thead><th>Purchaser's Information</th></thead>
<tbody>
<tr>
<td>Purchaser's Name : <?php //echo $purchaserName; ?></td>
</tr>
<tr>
<td>Purchaser's Address : <?php// echo $purchaserAddress; ?></td>
</tr>
<tr>
<td>City/Town : <?php //echo $purchaserCity; ?> </td>
<td>Province : <?php //echo $purchaserProvince; ?></td>
</tr>
<tr>
<td>Postal Code : <?php// echo $purchaserPostalCode; ?></td>
<td>Home Tel No : <?php// echo $purchaserHomePhone; ?></td>
</tr>
<tr>
<td>Business Tel : <?php// echo $purchaserBTel; ?></td>
<td>Email : <?php// echo $purchaserEmail; ?></td>
</tr>
<tr>
<td>Driver License : <?php// echo $purchaserLicense; ?></td>
<td>Expiry Date : <?php// echo $purchaserExpiry; ?></td>
</tr>
</tbody>
</table>
</body>