Achieving this is totally doable through the combination of JavaScript and CSS within an HTML environment;-)
I have prepared a code snippet for you on the W3Schools TryIt Editor. Simply copy and paste the code to see it in action. I believe no further explanation is necessary.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#content
{
width: 200px;
overflow-x: hidden;
overflow-y: auto;
white-space: pre;
background-color: red;
}
#scrollbar
{
width: 200px;
overflow-x: scroll;
overflow-y: hidden;
/*setting background color to transparent eliminates the blue line above the scrollbar*/
background-color: blue;
}
#innerScrollbar
{
height: 1px;
line-height: 1px;
font-size: 1px;
visibility: hidden;
background-color: yellow;
}
</style>
<script type="text/javascript">
//snippet to calculate browser's scrollbar width, taken from http://www.alexandre-gomes.com/?p=115
function getScrollBarWidth()
{
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
};
//function to update scrollbar on page load and while scrolling content
function updateScrollbar(content, scrollbar)
{
scrollbar.getElementsByTagName('*')[0].style.width = content.scrollWidth + "px";
content.scrollLeft = scrollbar.scrollLeft;
}
</script>
</head>
<body onload="updateScrollbar(document.getElementById('content'), document.getElementById('scrollbar'))">
<div id="content">Insert your content here. You can reposition the scrollbar div as needed. Note that the scrollbar itself will still be dictated by the browser or OS.</div>
...other website elements...
<div id="scrollbar" onscroll="updateScrollbar(document.getElementById('content'), this)"><div id="innerScrollbar"><!--dummy text--></div></div>
<script type="text/javascript">
//adjusting scrollbar-container height to scrollbar height + 1,
//ensures proper display of the scrollbar!
document.getElementById('scrollbar').style.height =(getScrollBarWidth() + 1) + "px";
</script>
</body>
</html>
Oh wait, upon reviewing your question once more, your requirement is now crystal clear. You just need to generate X number of tables with vertical scrolling enabled. Position the scrollbar div at the bottom after the tables and make some javascript adjustments looping through the tables:
innerscrollbar.style.width = maxWidthFromTables + "px";
tables[i].scrollLeft = scrollbar.scrollLeft;
To calculate maxWidthFromTables, fetch the maximum width using: tables[i].scrollWidth;