I need to keep a table header row always on top as a user scrolls down looking at the table data. I got it to work with two tables and 2 div tags, one for the header and one for the data, but then the HTML tables don't line up right.
Now I can hardcode the width of every cell but, this needs to apply to several different HTML pages and needs to be flexible. What I would like to do is:
<table>
<div id="header">
<tr>
<th>Header</th>
</tr>
</div>
<div id="Data">
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
</div>
</table>
Here div Header stays statically at the top of the page no matter how far down the user scrolls AND the header cell and data cells are automatically the same width.
Can this be done with one table? My current solution is very messy .
Now I can hardcode the width of every cell but, this needs to apply to several different HTML pages and needs to be flexible. What I would like to do is:
<table>
<div id="header">
<tr>
<th>Header</th>
</tr>
</div>
<div id="Data">
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
</div>
</table>
Here div Header stays statically at the top of the page no matter how far down the user scrolls AND the header cell and data cells are automatically the same width.
Can this be done with one table? My current solution is very messy .