Javascript修复表头 [英] Javascript Fix Table Header

问题描述

我无法修复表格的标题，这是我的问题：

I am having trouble to fix the header of a table, here is my issue:

我使用了相同的代码从这篇文章：
当用户使用jQuery将其从视图中滚出时，表头保持固定在顶部

I used the same code from this post: Table header to stay fixed at the top when user scrolls it out of view with jQuery

这几乎工作，但问题是头的宽度当我向下滚动时改变。

It is almost working, but the problem is the width of the header changed when I scroll down.

我不知道我做错了什么。我尝试下面的代码来修复宽度，但不工作。

I wonder what I am doing wrong. I tried the following code to fix the width, but does not work.

$("#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

推荐答案

表格单元格的宽度不仅由该特定表格单元格的内容决定，还由与其相同的垂直列中的其他单元格决定。这是因为表格形成块，所以列的宽度必须排成一行。

The width of table cells is determined by not only the content of that particular table cell, but also the other cells in the same vertical column as it. This is because tables form blocks so the widths of the columns must line up.

这里发生的是你计算的宽度 thead 细胞与为您分离的，固定的 thead 细胞计算的宽度不同。

What's happening here is that the calculated width of your attached thead cells is different from the widths calculated for your detached, fixed thead cells.

所附的 thead ，单元格的宽度主要由下面的数据决定。在第二个实例中，它并不附加到 tbody ，宽度只由标题 td s决定。

In the attached thead, the widths of the cells are largely determined by the data below. In the second instance, which isn't attached to the tbody, the width is solely determined by the header tds.

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

One solution would be to specify the width of the cells in both theads. As an example, specifying,

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

。

您还可以使用javascript来确定每个附加的 thead 单元格的宽度， code> thead 单元格等于其相应的单元格。计算DOM元素的维度可以使用Javascript / Jquery完成。查看答案喜欢这个有关如何操作的方法。

You could also use javascript to determine the width of each attached thead cell and set the bottom thead cells to be equal to their corresponding cell. Calculating the dimensions of DOM elements can be done with Javascript/Jquery. Check out answers like this one for methods on how to do that.

这篇关于Javascript修复表头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！