Question for the CSS gurus

[MrChad]

I've got a web app with a dynamically generated table. The table has column headers with data listed in each row below.

There are some times when the data in this table can get substantially large, forcing the user to scroll way down the page to see the last rows of the table. Down at the bottom of the page, the user is unable to see the column header row at the top of the table.

The customer has asked if the column header row can be "fixed" so that it remains visible when the user scrolls down the page. The only way I know how to do this is with a frameset, which I would like to avoid if at all possible. I also proposed a paging solution, where the table would be broken up into multiple pages, each page displaying x number of rows. The paging solution was not acceptable.

Does anyone know of a way I can keep the column headers visible using CSS? I noticed that Google Groups does something sort of similar with the thread topic in the upper-right corner of the browser window. Any help would be appreciated.

 

[Czar]

you can use javascript + css to stick a div layer anywhere on the screen so it doesnt move, there are some tutorials around that show you how to do this (sorry, just remember seeing this when I was learning css a while ago)

with this you could create a div box, insert the table header there and then people can scroll up and down without any problems

 

[MrChad]

As an update, I found this code, which was exactly what I was looking for!