Horizontal scroll of header does not work when scrolling table horizontally

[idchlife]

No description provided.

[brettryan]

One solution for this is to reinit after the container the table is in scrolls. One example would be when using with the twitter-bootstrap table-responsive container.

function initSticky () {
  $('table').stickyTableHeaders();
}
$(".table-responsive").scroll(function () {
  initSticky();
});
initSticky();

In this case it would be best to do this individually per table that scrolls instead of targeting all of them where multiple tables exist on the one page.

What I haven't worked out how to solve is the headings outside the scroll region are still visible due to the fixed positioning.

[myersultan]

how to hide fixed header into horizontal scrollable area in responsive table?

[metanite]

is there anyone who have fixed for this?

[simon04]

Duplicate of #68.

[ghost]

The solution proposed here doesnt work for me as the header overflows the table, so I need to make its overflow hidden, and then it just scrolls off screen.

This is what I have done that I have working:

var lastScrollLeft = 0;
var $table =$(".table-responsive");
var $header = $table.find("thead");

$table.add($header).scroll(function() {
    var tableScrollLeft = jQuery(this).scrollLeft();
    if (lastScrollLeft != tableScrollLeft) {
        $header.scrollLeft(tableScrollLeft);
        $table.scrollLeft(tableScrollLeft);
        lastScrollLeft = tableScrollLeft;
    }
});

With this they both scroll together, even if you scroll the header on mobile rather than the table body.

[bbearche]

Here's my fix. Works really well.

$(document).ready(() => {
           $('table').stickyTableHeaders({
                       fixedOffset: $('header'),
                       scrollableArea: $('.main-container')
          });
           $('table').scroll(() => {
                       let scroll = $('table').scrollLeft();
                       $('.tableFloatingHeaderOriginal').css({ left: -scroll! });
           });
});