Anonymous 0

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.

I can only use only HTML, CSS, and/or Javascript, and it must work in IE7/8. Other browsers don't matter; if I can get this to work in IE7/8, the clients will be happy.

I've seen this work in web apps, but I'm not sure it can be done just with HTML, CSS, and Javascript. Is there a way, or is it impossible?

Thanks in advance for your help!

2 answers

o.k.w 2355
0
points

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?

Answered almost 7 years ago by o.k.w
  • Thank you for trying, but none of these will work. Table must absolutely scroll vertically AND horizontally. I can't go into more detail about the content, as there is a confidentiality agreement involved, but the table content/headers must scroll as I described in the original question. :-( Carolyn M. Wallace almost 7 years ago
SpliFF 0
0
points

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.

Answered almost 7 years ago by SpliFF