Stephen Hill's website

Table with fixed header section

This example uses "position:absolute" to lock the table header at the top, allowing the user to scroll through the table whilst seeing the column descriptions. The problem with "position:absolute" is that it breaks the connection between the automatically calculated widths of the header columns and the table columns. I've solved this by using a small script which saves the widths of the table columns before the "position:absolute" setting is applied.

Note that "position:absolute" is a better choice than "position:fixed" because it positions the header relative to the containing DIV rather than to the top of the page. This means that if you use "position:fixed", the heading will stay in position when the page is scrolled, which is not the effect I'm after.