Sticky Horizontal Scrollbar...??

Adam used Ask the Experts™
I have a site that has a number of really BIG tables. There are a lot of columns and rows making it a nightmare to sort through. In order to maintain the width of my site, I am using "overflow-x: scroll" so that a horizontal scrollbar gets added to the bottom of my table to initially hide the excess columns (until a user decides to scroll).

However, one of the issues I have is viewing cells that are in the top right-most column of my table. A lot of people have complained that they need to scroll to the bottom of the table in the browser, use the table horizontal scrollbar to go to the far right, then scroll back up to the row they were on.

I'm not sure if this would be possible but a great solution would be to have the horizontal table scrollbar appear at the bottom of my browser once a user scrolls past the thead in the table. Once the user then scrolls past the bottom of the table, the scrollbar attaches itself back to the table (so in other words, somewhat of a "sticky" horizontal scollbar).

I've been looking online but haven't had much luck finding an example of this. If this isn't in fact possible, I'd also be open to other suggestions on how to improve my setup. Thanks in advance.
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2013
This is a problem without an ideal solution, and the fact that it is a table makes it even mor of a challenge.  There is this piece of jquery which may have the desired effect; but I can't guarantee reliabliluty:

When I run into this problem, rather than trying to re-invent scroll, I just add some control buttons ans reset the scroll location on the click event.

Trying to do something that belongs in a spreadsheet app using a web page is generally an issue of bad design.  You might be better off doing some analysis of how the users are using the table in the real world and optimize the design for the most frequently required functions, using logical blocks within the table to present panels of related fields instead of tryint to display the whole table at once.

Senior Web Developer
While a sticky scrollbar might be pretty cool, I'm not sure how it'd work.  I do know that to start, the scrollbar would need to be a separate HTML element that would be "draggable".  JavaScript would have to monitor its position (which would be relative to the container's width) and modify the position of the table appropriately...

It seems like a lot of work.

A simpler solution would be to set the overflow-x on the table's containing element, and to give the table a fixed width.

I drew up a quick example (attached) that does the job.

The absolute best thing about this, I think, is that it's all handled by semantic markup, reasonable CSS, and the scrolling is native browser stuff.  It's about as simple and logical as one can get for this problem.

Good luck!

You could also set a fixed height on the table's containing element and allow for y-scrolling.

The only CSS change is as follows:
	overflow: scroll;
	height: 400px;
.tablecontainer table{
	width: 1000px;

Open in new window



Thanks for the responses guys. I appreciate your suggestions. I kind of figured what I was asking for was not so simple.

@COBOLdinosaur: you're right in that perhaps I may need to take a step back and rethink how users will being using the data tables and approach it from a different angle. I guess one thing I didn't mention which I probably should have is that this is that the functionality I'm looking for will be used in the admin side of a Saas product (not actually a website which I may have led you to believe). So one of the issues is that assuming I limit the number of columns a user initially views in their data table, they will still have the ability to add as many columns as they want which can cause the table to be extremely wide. And based on the nature of the product, having a very wide table will be somewhat inevitable for most users.

@Tony O'Byrne: I guess another approach would be, as you mentioned, to set the height and width of the table and use overflow. It's not the prettiest solution but the most straightforward. Taking that a bit further, it might work better if I set the width and height with JavaScript based on the user's browser size rather than restricting it to one size.

Anyway, I will give this some more thought and do a bit more research. If I can't find anything else, I'll close this question and split up the points. If anything else comes to mind though, please feel free to share. Thanks again.


Thanks guys. Some good ideas.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial