Kev 0

This just needs to work on FF3.5 for now. Data is blanked in the screenshots.

I have a table that is too big for its space, both vertically and horizontally. I'd like the horizontal scrollbar to scroll both the THEAD and the TBODY, while the vertical scrollbar I'd like to just scroll the TBODY, leaving the THEAD fixed.

Is this not possible using just CSS?

I tried this:

tbody { overflow: auto; height: 93%; overflow-x: visible; }

And I get this:

Hidden Vertical Scrollbar

And while it's pretty close, unfortunately it means that the rightmost column has its data cut off a bit with no way to see it. Additionally, you have to scroll all the way to the right before you can scroll vertically--so aside from tedious mousewheeling, there's no way to scroll vertically while looking at the leftmost columns.

If instead I do this:

tbody { overflow: auto; height: 93%; overflow-x: visible; }

I end up with two horizontal scrollbars, and still have the problem of the vertical scrollbar not always been visible/accessible.

Double Scroll Bars

1 answer

Kev 0
This was chosen as the best answer

I don't think it's possible. I'm going to skirt the issue by narrowing the table until it doesn't need a horizontal scroll bar for most of my users.

Answered over 9 years ago by Kev