Sticky Horizontal Scrollbar...??

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.
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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.

Tony O'ByrneSenior Web DeveloperCommented:
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


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
AdamAuthor Commented:
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.
AdamAuthor Commented:
Thanks guys. Some good ideas.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.