On my page, I have three tables, with one of them containing a large amount of data. To make it easier to read, I decided to have a fixed header for the table. However, I am facing an issue where the columns in the thead (header) and tbody (body) are not aligned properly. The width of the header columns does not match the columns in the body. Any assistance on how to fix this would be greatly appreciated.
table {
border-collapse: collapse;
border-width: 1px 1px 1px 1px;
border-style: solid;
}
table td {
border-width: 1px 1px 1px 1px;
border-style: solid;
padding: 4px;
text-align: left;
}
table th {
border-width: 1px 1px 1px 1px;
background-color: lightgray;
border-style: solid;
padding: 4px;
}
.fixed_header {
border-collapse: collapse;
border-width: 1px 1px 1px 1px;
border-style: solid;
}
.fixed_header tbody {
display: block;
overflow: auto;
height: 500px;
}
.fixed_header thead tr {
display: block;
}<table class="fixed_header">
<thead>
<tr>
<th>COLUMN 1</th>
<th>COLUMN 2</th>
</tr>
</thead>
<tbody>
<tr>
<td> data for column 1</td>
<td> data for column 2</td>
</tr>
</tbody>
</table>Here is how it currently looks. I am looking for a solution that does not involve manually setting a custom width for each element, as my actual table has a large number of columns. https://i.sstatic.net/tqP1y.png