Javascript 修复表头

Question

我在修复表头时遇到问题，这是我的问题:

我使用了这篇文章中的相同代码: Table header to stay fixed at the top when user scrolls it out of view with jQuery

它几乎可以工作，但问题是当我向下滚动时标题的宽度发生了变化。

我想知道我做错了什么。我尝试了以下代码来修复宽度，但不起作用。

$("#header-fixed td").each(function(index){
var index2 = index;
$(this).width(function(index2){
    return $("#table-1 td").eq(index).width();
});
});

这是链接: http://vvb.me/test.html

Answer 1

表格单元格的宽度不仅取决于该特定表格单元格的内容，还取决于与它位于同一垂直列中的其他单元格。这是因为表格形成 block ，所以列的宽度必须对齐。

此处发生的情况是，计算出的附加 thead 单元格的宽度与为分离的固定 thead 单元格计算出的宽度不同。

在所附的thead中，单元格的宽度主要由下面的数据决定。在未附加到 tbody 的第二个实例中，宽度仅由 header td 决定。

一种解决方案是在两个theads 中指定单元格的宽度。例如，指定，

<td style='...; width: 50px;'>

在所有 thead 单元格上将使它们相等。

您还可以使用 javascript 确定每个附加的 thead 单元格的宽度，并将底部的 thead 单元格设置为与其对应的单元格相等。可以使用 Javascript/Jquery 计算 DOM 元素的维度。查看答案 like this one有关如何做到这一点的方法。