Absolute/Fixed header in table 有滚动条

Question

我有一个 table 数据不受我控制（它来自用户）。我们使用一个名为 Clusterize 的插件，让我们可以平滑地滚动数万行，这些行具有它需要的某种特定类型的标记（您会在我的 JSBin 中看到 "clusterize" 类）。

问题是在有像 Windows 或 OS 这样的滚动条的计算机上插入鼠标后，我们固定的 table header 上没有滚动条，这使得因此，当您水平滚动时，由于宽度或其他原因的差异，它不会在整个 table 溢出的同一 "pace" 处向右滚动。我在 JSBin link.

中有一个行为示例

同样，在带有滚动条的计算机上。您也可以在 OS X 首选项中始终打开滚动条。

http://output.jsbin.com/wekafiq

这里还有一些屏幕截图。第一个是不滚动，第二个是向右滚动。

我愿意接受仅 CSS、仅 JS 或其他任何可能的修复。我花了大约 2 天时间尝试不同的事情，这是我最接近的一次，但我没有想法。

Answer 1

类似的问题已经在Clusterize的gitter中讨论过了，查看https://gitter.im/NeXTs/Clusterize.js

您可以在主要 table 之外添加单独的 table 只是为了 headers 并使其与主要区域列宽同步。

示例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));

Absolute/Fixed header in table 有滚动条

Absolute/Fixed header in table with scrollbars

javascript

css

jquery

clusterize