Table headers always on top

[Leftcorner]

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 .

[Count]

Try making a function to adjust the width of the header cells after the data table has been populated.

Know what I mean?

[Charles]

You might also try the THEAD element. That's what it's for. (http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3)

[Leftcorner]

Thanks for the reply. Sounds complicated. Are you talking about calculating the data cell width based on it's contents. Like fixed width font, with 5 characters = 13px for example?

[Count]

No, I mean using the DOM, do something like

tdHead0.width = tdBody0.width;
(of course initiailizing tdHead0 and tdBody0 correctly depending on how the table is created)

not 100% if it'll work, but its my best guess.

[Leftcorner]

Thanks, but I wouldn't even know how to start that.

EDIT: Tried thead tag around header row, and gave it an ID for the script. Doesn't work...

[Count]

I wish I could help you, but Id have to pound my head against this one for a while. My DOM is more trial and error than i'd like. But I'm sure it can be done.

[Leftcorner]

No problem. I will keep looking. All it has to work for is IE.