Check out this HTML code snippet:
div {
border: 2px solid red;
height: 50vh;
width: 50vw;
}
table {
border: 1px solid;
table-layout: fixed;
}<div>
<table rules="cols">
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Phone No</th>
</tr>
<tr>
<td>Antony</td>
<td>20</td>
<td>USA</td>
<td>12345</td>
</tr>
<tr>
<td>Das</td>
<td>20</td>
<td>UK</td>
<td>12345</td>
</tr>
<tr>
<td>Michel</td>
<td>20</td>
<td>USA</td>
<td>12345</td>
</tr>
</table>
</div>The initial output is shown here:
I would like the outcome to resemble this instead:
To achieve this effect, I require the border rule to extend until the end.
Adjusting the table's height currently resizes along with the content,
I am in need of resizing only the column rules. Any suggestions will be greatly appreciated.