Fixing the horizontal scrollbar of a div to the bo

Question

I have a table which goes longer than the length of the page rendered on the browser. That table is placed within a Div which is like

<Div style="width: 100%; overflow: auto;">

As a result, when the contents of the page exceed the width of the table, I will have to scroll the page down using the browser scroll bar to look at the horizontal scroll bar that appears at the bottom of the above div.

I want to always fix the horizontal scroll bar of the div at the bottom of the page. So that I can scroll to the right of the table even without scrolling down.

Here is a sample in jsFiddle

How will I do this?

Answer 1

Yes, its obvious. You had set overflow: auto; to the div. It will surely display a horizontal/vertical scroll bar whenever its content goes beyond its bound. If you really want to remove that scroll bar from that div and set it to the browser, just remove that piece of css from that div and simply add it to the body.

DEMO