Is there a way to align the widths of table elements while maintaining a fixed header row? If the 'fixed' property is disabled, the width spaces correctly but the header won't stay fixed and will scroll out of the container div. Enabling the 'fixed' property properly fixes the scrolling issue, but causes the widths to not line up. Can this setup be modified to ensure the widths are aligned with the fixed property in place?
.container {
border: 1px solid black;
height: 100px;
overflow-y: scroll;
}
td {
font-size: 40px;
}
table {
table-layout: fixed;
height: 100%;
}
thead{
position:fixed;
}<div class="container">
<table>
<thead>
<tr>
<th>
header
</th>
<th>
header
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
data
</td>
<td>
data
</td>
</tr>
<tr>
<td>
data
</td>
<td>
data
</td>
</tr>
<tr>
<td>
data
</td>
<td>
data
</td>
</tr>
</tbody>
</table>
</div>