边框折叠时未正确复制单元格宽度属性

Question

我通过复制 tr html 然后复制 th 宽度来克隆表标题行。但这失败了，因为当边框：'Wpx' 和边框折叠：'collapse' 时，宽度被写为（宽度减去 W）像素。如果没有设置border-collapse，则宽度写入正确。

代码很简单：

var arr = [];

// copy html, where abc is the destination <tr> and def is the source
$abc.html($def.html());

// now copy widths of table header cells 
$def.children().each(function()  {arr.push($(this).css("width"));});
$abc.children().each(function(index) {$(this).css("width", arr[index]);});

Fiddle 显示问题：http://jsfiddle.net/marvmartian/9z24j7vz/4/

一种解决方法（在小提琴中说明，但已注释掉）是检查最终表格的大小，如果它们不相等，（hacky）在​​编写它们之前将 W 添加到宽度。

这种行为似乎是一个错误（使用 Chrome）。显然这是一个特点。我在这里错过了什么？

Answer 1

而且，这里是修复：

table.pvtTable tr th {
    background-color: #e6EEEE;
    border: 6px solid black;
    padding: 5px;
    box-sizing:border-box;
}

Chrome 不会将单元格宽度计算为宽度 + th 边框宽度（我猜是因为边框折叠，在父元素上，我猜？），如果你在 css 中添加它 - 边框包含在最终宽度中。但是，这次不确定哪个（firefox 或 chrome）是正确的。 :)

小提琴：http://jsfiddle.net/9z24j7vz/5/