CSS: Freeze table header and first column, *but only on certain axes*

Posted by Mega Matt on Stack Overflow See other posts from Stack Overflow or by Mega Matt
Published on 2010-05-26T00:13:01Z Indexed on 2010/05/26 0:41 UTC
Read the original article Hit count: 870

Filed under:
|
|
|
|

Hello all,

I have a variation on a common question, and I'll try to explain it as best I can. It may take some visualization on your part. I have an HTML table (in reality there are tables within tables within divs within tables -- I'm using the JSGantt plugin). I'd like for the table header to be frozen only when I scroll down on the y-axis, but if I need to scroll right to see more data, I would like it to scroll right.

Meanwhile, as I scroll down (with the header row staying put), I'd like the first column of the table to scroll down with me. But when I scroll right, I want the first column to stay put (but as I mentioned above, the header row to scroll with me). So essentially I've frozen the first column only on the x-axis and the header row only on the y-axis.

I'll stop there for now. If anyone needs more clarification I can try to explain. I've tried this multiple ways, but I'm convinced that it may not be possible without some serious javascript. The table, by the way, is contained within an outer div with set dimensions, hence the need for me to scroll the data.

Any help you can provide would be greatly appeciated. Thanks very much.

© Stack Overflow or respective owner

Related posts about css

Related posts about scrolling