Use css to stop the top row of a table from scrolling

[rline101]

I'm wondering whether there's a way to do this:

I have a page generated by php. All the information in a table is generated from the same mysql db. The page has a standard header at the top, and then the table. I want the first row of the table and what's above it to stay fixed when I scroll down, but everything underneath that to move when I scroll. Much like you can do on Excel with freeze panes. Is it possible to do this using css? (css is the only thing I've heard of that might have a chance.) I'm fine with php and mysql but a bit of a newbie with css. Thanks in advance

[Setek]

I think the easiest way to implement this isn’t to stop the top row of the table from scrolling, but to make the body of the table scroll. It involves having a probable second internal scrollbar, and a fixed-height table body.

You can separate out the table heading from the table body like so:

HTML:

<table>
<thead>
<tr>
<th>Top row</th>
</tr>
</thead>
<tbody>
<tr>
<td>table body content</td>
</tr>
</tbody>
</table>

CSS:

table tbody { height: 400px;
overflow: auto; }

… a solution involving fixing the position of the table header will be a bit more fiddly; it’s possible it will create bugs in IE 6 etcetera. What do you think of this?