Floating horizontal scroll bar for html table

Question

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 1

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/

Answer 2

Yes, place it inside a <div> tag, and add overflow:scroll; to the style of the div.