Solved

Sticky Horizontal Scrollbar...??

Posted on 2014-03-05
5
573 Views
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.
0
Comment
Question by:Adam
5 Comments
 
LVL 53

Assisted Solution

by:COBOLdinosaur
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:

http://progrnotes.blogspot.ca/2013/07/horizontal-scrollbars-at-top-bottom-in-datatables.html

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.

Cd&
0
 
LVL 6

Accepted Solution

by:
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!
Tony.

[Edit]
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:
.tablecontainer{
	overflow: scroll;
	height: 400px;
}
.tablecontainer table{
	width: 1000px;
}

Open in new window

scrollingtable.html
0
 
LVL 1

Author Comment

by:Adam
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.
0
 
LVL 24

Assisted Solution

by:lenamtl
lenamtl earned 150 total points
ID: 39958782
0
 
LVL 1

Author Closing Comment

by:Adam
ID: 39963822
Thanks guys. Some good ideas.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

760 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now