I've been asked to design a very long, very wide table. The clients don't want users to scroll with the browser scroll bars; instead, they want a table that fits in one screen while the table contents scroll both vertically and horizontally while leaving the top and left columns (headers) visible at all times.
In other words, the top header would need to scroll left/right with the content, but remain static if the user scrolled up and down. The left header would need to scroll up/down with the content, but remain static if the user scrolled left/right.
Thanks in advance for your help!
You can give these few jQuery Grid/Table plugins a try:
Browse the demos to see which one fits your need. They might give you new ideas, e.g. instead of scrolling horizontally to accomodate all columns, how about hiding those columns that users are not interested it?
Put the table in a div with overflow:auto and a max-width/max-height. Attach the headers to the top of the div using absolute or static position. Your main issue is going to be getting the headers to line up with the content during horizontal scrolling but detach while scrolling vertically. To do that the header probably can't be part of the table.
On the other hand it might be possible to split the table using thead/tbody and apply overflow:auto to only the body. Give it a try.