The solution is to use JS to horizontally scroll the top div so that it matches the bottom div.
You must be very careful to make sure the top and bottom are exactly the same sizes, for example you might need to make the TD and TH use fixed widths.
Here is a fiddle https://jsfiddle.net/jdhenckel/yzjhk08h/5/
The important parts: CSS use
.head {
overflow-x: hidden;
overflow-y: scroll;
width: 500px;
}
.lower {
overflow-x: auto;
overflow-y: scroll;
width: 500px;
height: 400px;
}
Notice overflow-y
must be the same on both head and lower.
And the Javascript...
var head = document.querySelector('.head');
var lower = document.querySelector('.lower');
lower.addEventListener('scroll', function (e) {
console.log(lower.scrollLeft);
head.scrollLeft = lower.scrollLeft;
});