Question

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

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

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

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

我完全不知道如何解决这个问题。请查看the jsFiddle，因为它比我更好地解释了问题。

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

Answer 1

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

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

在你的jquery代码的末尾，如here，它似乎有效。

Answer 2

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

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

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

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

您可以查看此答案以获取更多信息（他们会比我现在更好地解释它）：How do I retrieve an HTML element's actual width and height?

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

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

3 个答案: