<thead> displacement within a scrollable block and responsive-table bootstrap

[samuel-fonseca]

When using Bootstrap 3 responsive-table class it helps me when I need to scroll sideways since my table is quite large.
I want to use the StickyTableHeaders so that I can know which column I am looking at, but when I scroll sideways to the right, the thead does not follow accordingly, it does not move with the table; it moves much further and leaves a large gap between it and the right side of the table.

The thead element also leaves the responsive-table div.

I call the stickyTableHeaders as follows:

$(document).ready(function()
{ 
    $("#records").tablesorter( {sortList: [[3,1]]} ); // also using TableSorter
    $('table').stickyTableHeaders({scrollableArea: $('.table-short')[0]});
}

I have some pictures of what it looks like on my Dropbox. I have not publish my site yet just for neatness sake.

As you can see below.

[samuel-fonseca]

This is the setup for my table:

<div class='table-responsive table-short'>
<table class='table table-striped table-hover' id='records'>
<thead>
    <tr>
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Check in</th>
        <th>Check out</th>
        <th>House number</th>
        <th>Guests</th>
        <th>Phone Number</th>
        <th>Email</th>
        <th>Address</th>
        <th>City</th>
        <th>State</th>
        <th>Zip</th>
        <th>Affiliated Church</th>
        <th>Notes</th>
        <th></th>
    </tr>
</thead>
...

[matthiaslischka]

Have the same issue. See example code here: http://jsfiddle.net/stFcx/4028/
(Size the browser window down so you get side to side scrolling.)

The header pops out of its "table-responsive div".
Once popped out it does not scroll correctly sideways with the table anymore.

BR Matthias

[brunomperes]

+1

[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! });
           });
}); 

[Beastw00d]

@bbearche could you provide the html with your fix? That is not working for me.

[vrsotto]

having same prob. please share your solutions if you happened to resolve this issue...

[vrsotto]

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! });
           });
}); 

can you explain your code or share your html/js? thanks!

[SDKiller]

This worked for me

  $('.table-responsive').on('scroll', function () {
      $(window).trigger('resize.stickyTableHeaders');
  });