将单元格宽度复制到固定位置克隆表

Question

通过概括这个SO答案中的代码，我创建了一个小的jQuery插件，可以很容易地在任何表上设置滚动页眉 - 也就是说，当你向下滚动时，表头通常在在可视窗口中，标题的克隆固定在窗口的顶部，以便您可以看到哪些列是哪个。 这一切都很好，但我遇到的问题是我无法让列宽在克隆表和原始表之间完美匹配。

我创建了一个jsFiddle，它在这里演示了这个问题。 它的要点是我使用以下循环将单元格宽度从父表复制到克隆表：

$("#tbl1").find('tr').first().children().each(function(i, e)
{
    $($("#tbl1_clone").find('tr').children()[i]).width($(e).width());
});

这是必要的，因为克隆表只包含父表的标题; 它没有任何内容，因此它的列宽度将与没有此步骤的父表格不同。 但是，此循环不能正常工作。 克隆表中的单元格宽度总是偏离几个像素。 这种情况发生在IE8和Chrome中（可能是其他人，但我还没有测试过。）

关于如何纠正这个问题，我完全失去了。 请查看jsFiddle ，因为它比我更好地解释了问题。

或许值得注意的是，当克隆表的位置不固定时，相同的代码似乎也可以工作。 但是，这对我没用，因为我需要修复它。

Answer 1

出于某种原因，克隆表上的width属性会丢弃计算。 我不确定为什么，但如果你使用：

$("#tbl1_clone").removeAttr('style');

在你的jquery代码的最后，就像here ，它似乎工作。

Answer 2

我知道这个问题真的很老了......但我偶然发现了类似的问题，我想补充一个答案仅供参考。

我花了大约一个星期才意识到从获取Element.offsetWidth()到获取Element.getBoundingClientRect().width完全解决了我的问题。

我不确定jQuery ...但是我使用普通的JS在这里做同样的事情（克隆我的表头并复制宽度）我有奇怪的宽度问题没有任何意义..这完全修好了。

显然， Element.getBoundingClientRect().width将获得最近部分的宽度，而Element.offsetWidth()将其四舍五入到最接近的整数。

您可以查看此答案以获取更多信息（他们将比我现在更好地解释它）： 如何检索HTML元素的实际宽度和高度？

Answer 3

尝试使用offsetWidth，类似......

    // make each cell width in the header table, the same width as
    // the cells in the orginal table (header table has one row)  
    $headerTable.find('td, th').each(function(index)
    {
        var width = originalTable.rows[0].cells[index].offsetWidth
        this.width = width;
    });