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

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

这里发生的事情是，附加的thead单元格的计算宽度与分离的固定thead单元格的宽度不同。

在附件thead中，单元格的宽度很大程度上取决于以下数据。在未附加到tbody的第二个实例中，宽度仅由标题td确定。

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

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

所有thead单元格上的

都会使它们相等。

您还可以使用javascript来确定每个附加thead单元格的宽度，并将底部thead单元格设置为等于其对应的单元格。可以使用Javascript / Jquery来计算DOM元素的维度。查看答案like this one了解如何执行此操作的方法。

Javascript修复表头

1 个答案: