column width issues in html tables that only scroll the body - html

Question

I have a table where I have successfully set up the body to scroll, and leave the header alone, but this now appears to be causing problems with column widths:
One has to specify the widths of columns in the tbody to be the same as the ones in the thead, else the browser decides to do things how it thinks it should be done, ie: wrong.
however, the browser (and this is consistent across the three recognised mainstream browsers - ie, firefox and chrome) still seems to want to vary the size of my columns.
here is a code sample:
CSS:
<style>
#divPersonalTables tbody:nth-child(2) {max-height: 350px; overflow-y: scroll; overflow-x: hidden}
.tdTextColumn { width: 200px }
.tdCheckColumn { width: 86px }
</style>
HTML:
<div style="display: flex" id="divPersonalTables">
<table id='tblTables' style="display: inline-block; width: 500px">
<thead>
<tr>
<th class="tdTextColumn">Forename</th>
<th class="tdTextColumn">Surname</th>
<th class="tdCheckColumn">Current</th>
<th style="width: 14px"></th>
</tr>
</thead>
<tbody style="display: block">
<tr>
<td style="display: none"></td>
<td class="tdTextColumn"><input type="text" /></td>
<td class="tdTextColumn"><input type="text" /></td>
<td class="tdCheckColumn"><input type="checkbox" /></td>
</tr>
</tbody>
</table>
</div>
The scrolling body style is applied to all tbody elements contained within that div, as there are two - one omitted here for conciseness.
So in summary: how can I make sure the browser is setting the columns to the widths I think it should be ?

Answer 1

The order of your columns does not match.
Put your hidden column to the right and you should be set.
<div style="display: flex" id="divPersonalTables">
<table id='tblTables' style="display: inline-block; width: 500px">
<thead>
<tr>
<th class="tdTextColumn">Forename</th>
<th class="tdTextColumn">Surname</th>
<th class="tdCheckColumn">Current</th>
<th style="width: 14px"></th>
</tr>
</thead>
<tbody style="display: block">
<tr>
<td class="tdTextColumn"><input type="text" /></td>
<td class="tdTextColumn"><input type="text" /></td>
<td class="tdCheckColumn"><input type="checkbox" /></td>
<td style="display: none"></td>
</tr>
</tbody>
</table>
btw: Why do you set <td style="display: none"></td> ?