I am struggling to create a data table with fixed column widths (20% each). I have incorporated div elements in my table structure to enable dynamic row creation using Angular, but this has caused some design issues. My goal is for all rows to occupy 100% width consistently, even if one of the columns is empty. What additional steps should I take to achieve the desired outcome?
<table class="sturdy">
<thead>
<div class="test">
<tr>
<th>ID<th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Date of Birth</th>
</tr>
</div>
</thead>
<tbody>
<div class="test" *ngFor="let attribute of attributes">
<tr>
<td>{{ attribute[0] }}</td>
<td>{{ attribute[1] }}</td>
<td>{{ attribute[2] }}</td>
<td>{{ attribute[3] }}</td>
<td>{{ attribute[4] }}</td>
</tr>
</div>
</tbody>
</table>
Below is the CSS styling used:
td, th {
border: 1px solid black;
}
table {
margin: 15px 0;
border: 1px solid black;
table-layout: fixed;
width: 100%; /* must have this set */
}
body {
margin: 0 auto;
padding: 10px;
}
.sturdy th:nth-child(1),
.sturdy th:nth-child(2),
.sturdy th:nth-child(3),
.sturdy th:nth-child(4),
.sturdy th:nth-child(5) {
width: 20%;
}