Sticky Horizontal Scrollbar...??

Posted on 2014-03-05
Last Modified: 2014-03-29
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.
Question by:Adam
LVL 53

Assisted Solution

COBOLdinosaur earned 150 total points
ID: 39909964
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.


Accepted Solution

Tony O'Byrne earned 200 total points
ID: 39909986
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


Author Comment

ID: 39918980
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.
LVL 25

Assisted Solution

lenamtl earned 150 total points
ID: 39958782

Author Closing Comment

ID: 39963822
Thanks guys. Some good ideas.

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question