将标题和数据与可滚动的html表对齐以用于大型数据集

Question

我已经从mysql数据库构建了一些动态生成的表，并且我正在尝试设置它以便数据行将滚动，而标题行则不会。这样您就不必回滚到页面顶部以查看您正在查看的列。

到目前为止，我的解决方案是将标题分隔到自己的表中，然后滚动一个只包含如下数据的表：

<table id='box-table-a' border='0' width='100%'>
     HEADER ROWS
</table>

<div style='resize:vertical; height:500px; width:100%; overflow:auto;'>";
    <table id='box-table-a' border='0' width='100%'>";
       DATA
    </table>
</div>

这有点作用，但标题和数据行中的列宽度不同（见图）。关于如何让列彼此对齐的任何建议？