Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


Sticky Horizontal Scrollbar...??

Posted on 2014-03-05
Medium Priority
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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 53

Assisted Solution

COBOLdinosaur earned 450 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 600 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 26

Assisted Solution

lenamtl earned 450 total points
ID: 39958782

Author Closing Comment

ID: 39963822
Thanks guys. Some good ideas.

Featured Post

Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

Question has a verified solution.

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

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

704 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