Scrollable Table with Fixed Headers

Using HTML5, the CSS for this is straight-forward, but the problem is the widths of the cols then get all messed up.

So first make sure to use HTML5 table markup:

<table>
<thead>
<tr>
<th>
<th>
</tr>
</thead>
<tbody>
<tr>
<td>
<td>
</tr>
</tbody>
</table>

Then use the following CSS:

<style>
  table tbody, table thead {
        display: block;
    }

    table tbody {
        overflow: auto;
        height: 200px;
    }
</style>