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

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.

[SDKiller]

This worked for me

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

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