Javascript 带有滚动条的表格中的绝对/固定标题

我有一个表，其中包含我无法控制的数据（它来自用户）。我们使用一个名为的插件，让我们平滑地滚动数万行，这些行具有它需要的特定类型的标记（您将在我的JSBin中看到“clusterize”类）

问题是，在有滚动条的计算机上，如Windows或OS X，插入鼠标，固定的表格标题上没有滚动条，这使得当你水平滚动时，它不会以与整个表格相同的“速度”向右滚动，因为宽度不同或其他原因。我在JSBin链接中有一个行为示例

同样，在带有滚动条的计算机上。您也可以在OSX首选项中随时打开滚动条

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

---

我对任何可能的修复都持开放态度，这些修复仅限于CSS、JS或其他。我花了大约两天的时间尝试不同的事情，这是我得到的最接近的结果，我已经没有想法了。

类似的问题已经在Clusterize的gitter中讨论过，请查看

您可以在主表之外添加单独的表，仅用于标题，并使其与主区域列宽度保持同步

范例

---

如果我理解你的意思的话，它是独立的并且在表外的，问题在于行的宽度不同。比如

排名

。如果我删除

Rank

，则带有数字的

Rank

列将折叠以刚好适合

1

，

2

，

3

，等等。我需要在DOM表中设置

Rank

，这样它就知道如何使列的宽度适合

Rank

文本。我想你对我的问题@Denis:）的印象是错误的，这是关于滚动的。我不关心粘性标题是否有粘性，而是在右边。在您的示例中，一旦表格内容导致其滚动（在我的应用程序中需要滚动），标题将不再同步。我有上面的截图，但这是你的例子看起来像滚动的哦，这是我添加到你的例子中的CSS：。clusterize{width:500px；}td{white space:nowrap；}@OscarGodson是的，我的错，这一个怎么样？你最后的评论肯定做到了！它需要一些调整，就像我在聊天中提到的，我在clusterize数据表中包含了一个隐藏的表头行，以便在上面的人造表头中调整大小是正确的

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