Horizontal scrollbar for a page contains table

Question

JSFiddle here.

Here is my SSCCE, and in order to use the HORIZONTAL scrollbar, one needs to vertically scroll to the bottom of page/container so that the horizontal scrollbar becomes visible (i.e. it is scrolled into the viewport by vertical scrolling) and the user can use it.

I need the horizontal scrollbar to be FIXED, so that it is always visible, no matter what the position of the vertical scrollbar is.

IMPORTANT:

Now I have seen this and this, but the thing is that I can not give a fixed height to .tab-container, because that gives VERTICAL scroll bar to the table (inside the margins-on-sides), but I need the Vertical scrollbar to be at the right edge of the page (and not at the right edge of the table), the way it currently is. That is the real challenge here.

Answer 1

You can use a perfectScrollbar for this. I've updated your fiddle. JsFiddle is getting a little bit crazy with the code, but on localhost works well:

http://jsfiddle.net/r8xn9aua/32/

I think you might need to use position:absolute instead of position:fixed for the "ps-scrollbar-x-rail" positioning. Since it's a plain html element, you can do whatever you want.

.ps-container > .ps-scrollbar-x-rail {
    opacity: 1;
    position: fixed;
    bottom: 0;
    left: 0 !important;
}