html - 将标题和数据与大型数据集的可滚动 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>

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