javascript - 计算出的宽度与 td 元素的实际宽度不同

Question

我正在使用 jQuery 对 td 标签进行一些操作——我将它们的宽度设置为与另一个表中的 td 的宽度相同(实际上是这个是一个固定的标题表插件，所以我必须表格 - 一个用于标题，一个用于主要内容。相应的 ths 和 tds 应该有相同的宽度)。

问题

如果我在 Chrome 中查看“计算样式”，所有计算都可以正常工作 - 宽度设置正确。
但是，实际宽度与“计算宽度”不同!

查看 td 元素的计算样式图片:

现在你可能认为元素的实际宽度会是1+1+96+1+1 = 100，但它是99!

我发现了这个问题 - Computed column width is different than css declared width for column. How does browser decide width?并按照我使用的建议 table-layout: fixed;。我也使用了 border-collapse: collapse; 来删除列之间的空格，所以我认为这不会成为问题。

代码

这是我设置 td widths 的代码的一部分:

$('thead th, tbody tr:first td').each(function(i, el){

    i %= col_count; // I'm using because we go through 2 lines.
                    // It shows at which td we are. */

    // col_width is an array with already calculated
    // widths (using .outerWidth()) for each column */

    // if the needed width is the same as the current td's,
    // we can go to the next td */
    if(col_width[i] == $(this).outerWidth()) return 1;

    // the width to be set with substracted borders and paddings
    // (here we don't have margins)
    var new_width = col_width[i] - ($(this).outerWidth() - $(this).width());
    $(this).width(new_width);

    // I have also tried this, but the result was the same:
    // $(this).css('width', new_width + 'px');
});

我应该注意到 thead th 和 tbody td 来自不同的表(正如我之前提到的)

再试一次

我尝试的另一件事 - 向每一列添加一个像素 - $(this).width(new_width + 1);。在演示页面上它起作用了。我将新代码复制到真实页面，并在几乎所有表格上都有效!只有一张 table 有问题。
它证明容器(表格所在的位置)不够宽，因此滚动条“使”列变短了。当然，我扩大了容器的宽度。问题消失了。

---

真正的问题

在问(写)这个长问题的同时，我解决了它!所以现在它发生了一点变化:为什么？

为什么当我多加一个像素时，问题就消失了？为什么计算宽度与实际宽度不同？

当然，如果你能给我提供另一个更专业的解决方案，我会很高兴:)

JSFIDDLE (已经设置宽度，从 chrome 控制台复制)。调整 result 框的大小以正确查看整个表格。

Answer 1

计算宽度和实际宽度的差异是由于使用了 border-collapse: collapse。

边框折叠:折叠

Borders are collapsed into a single border when possible (border-spacing and empty-cells properties will be ignored)

这会将每个 td 元素的宽度减少 1px，因为每个元素的边框都已缩减为单个边框。