Floating horizontal scroll bar for html table

Alex picture Alex · Aug 22, 2012 · Viewed 8k times · Source

I have an html table that is very tall. The web page has to be scrolled vertically to reach the scroll bar at the bottom of the table. It would be nice if I could float the horizontal scroll bar for the table at the bottom of the browser window while the user is scrolling the page and the table is visible. Can such a thing be done?

Here is a jsFiddle example of the situation: http://jsfiddle.net/RurTZ/1/

Answer

Joshua Stewardson picture Joshua Stewardson · Mar 6, 2013

The Grid suggestion by @KDavid is good, but if you're looking for something a bit lighter I had success with the the floatingScrollbar jQuery plugin (demo).

After making sure the plugin JS is loaded, the magic call happens:

$('.your-div').floatingScrollbar();

I also had to set the div CSS to:

.your-div {
  overflow-x: auto;
  width: 100%;
}

Here is a fork of your jsFiddle with it working: http://jsfiddle.net/RxTQM/1/