I've built some dynamically generated tables from a mysql database and am trying to set it up so that the data rows will scroll, and the header row will not. This way you don't have to scroll back to the top of the page to see what column you are looking at.
My solution so far has been to seperate the header into its own table, and then scroll a table with only the data like this:
<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>
This works somewhat but the columns in the header and data rows are not the same width (see image). Any suggestions on how to get the columns to line up with each other?
