计算宽度不同于td元素的实际宽度

Question

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

问题

如果我在Chrome中查看"计算样式" - 所有计算器工作正常 - 宽度设置正确.
但是,实际宽度不同于"计算宽度"!

看到这个td元素的计算样式的图片:

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

我发现了这个问题 - 计算列宽度不同于列声明的css声明宽度.浏览器如何确定宽度？并遵循我使用的建议table-layout: fixed;.我也使用border-collapse: collapse;过,以便删除列之间的空间,所以我不认为这会是问题所在.

代码

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

$('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);.在演示页面上它有效.我将新代码复制到真实页面以及几乎所有表格上都有效!只有一张表存在问题.
它证明了容器(表所在的位置)不够宽,因此滚动条"使"列更短.当然,我扩大了容器的宽度.问题消失了.

---

真正的问题

在问(写)这个长问题时,我解决了它!所以现在它正在改变一点:为什么？

为什么当我添加一个额外的像素时,问题就消失了？为什么computed width不同于real width？

当然,如果你为我提供另一种更专业的解决方案,我将很高兴:)

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

Answer 1

计算的宽度与实际宽度不同，因为每个元素都有 1 px 边框和左右 1 px 空白，与顶部和底部相同。