Scrollable div table header goes out of box

[warlockdn]

If you see your scrollable-div.html demo example. I have reduced the width of the second table so that it has a horizontal scroll.

http://jsfiddle.net/warlockdn/f3w229c9/

On scroll the second table's header comes out of the box and that is not what I need.

What should be done here ?

[arfordweb]

The floating table header is a copy of the original one. But, with its position set to "fixed". AFAIK, "fixed" elements generally appear over top of the normal flow of elements in a document. So, if the header doesn't fit in the containing div, its hidden part will appear outside of it and will be positioned from the boundaries of the window rather than the scrollable area.

The short answer is this probably isn't the best solution for you if you require horizontal scrolling. This is much better optimized for vertical scrolling, and for minimizing the amount of processing done as the user scrolls. There are other solutions out there that absolutely position the table header copy as the users scrolls. But, they're jumpier or they don't reposition the header instantly to give the appearance it really stays in the same place.

Now, another solution that could work, but I wouldn't recommend, is to put the table in a separate document and iframe it in. I'm pretty sure the fixed position is relative to the iframe's boundaries and not those of the original window. So, you could do something like having a 500px-wide table in an iframe that is 400px wide. The iframe will be horizontally scrollable, but the added table header will be hidden under the edges of the iframe border and will scroll along with the rest of the iframe's contents. I haven't tried this solution, but it seems it should work.

My suggestion is to design around the fact that you should have the full width of the table displayed.

[arfordweb]

Looks like this is discussed here as well: #68

[warlockdn]

umm not sure the solution worked. What I did was took it to stackoverflow and a fellow guy helped.

Here is the solution

http://stackoverflow.com/questions/33342854/table-with-multiple-inner-tables-and-fixed-header-table-with-horizontal-scroll

[amadeuszi]

My pull request #149 fixes the issue . Adding a clipping container fixes the isssue