Absolute/Fixed header in table with scrollbars

Question

I have a table with data I don't control (it comes from the user). We use a plugin called Clusterize that let's us smoothly scroll tens of thousands of rows which has some specific type of markup it needs (you'll see "clusterize" classes in my JSBin).

The problem is that on computers that have scrollbars like Windows or OS X with a mouse plugged in there's no scrollbars on our fixed table header which makes it so when you horizontal scroll it doesn't scroll right at the same "pace" as the the whole table overflow because of the difference in widths or something. I have an example of the behavior in the JSBin link.

Again tho, on computers WITH scrollbars. You can turn on scrollbars all the time in OS X preferences too.

http://output.jsbin.com/wekafiq

Here's some screenshots too. the first is not scrolling and the 2nd is when you scroll to the right.

I'm open to any possible fixes that are CSS only, JS only, or whatever else. I've spent like 2 days trying different things and this is the closest I've gotten and I'm out of ideas.

Answer 1

Similar question has been already discussed in Clusterize's gitter, check out https://gitter.im/NeXTs/Clusterize.js

You could add separate table outside of the main table just for headers and keep it synced with main area columns width.

Example http://codepen.io/NeXTs/pen/ZbmWqg

var fitHeaders = (function() {
  var prevWidth = [];
  return function() {
    var $firstRow = $('#contentArea tr:not(.clusterize-extra-row):first');
    var columnsWidth = [];
    $firstRow.children().each(function() {
      columnsWidth.push($(this).width());
    });
    if(columnsWidth.toString() == prevWidth.toString()) return;
    $('#headerArea tr').children().each(function(i) {
      $(this).width(columnsWidth[i]);
    });
    prevWidth = columnsWidth;
  }
})();

var clusterize = new Clusterize({
  rows: data,
  scrollId: 'scrollArea',
  contentId: 'contentArea',
  callbacks: {

    // Update headers width on cluster change
    clusterChanged: function() {
      fitHeaders();
    }
  }
});

// Update headers width on window resize
$(window).resize(_.debounce(fitHeaders, 150));