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

cell width attribute not copied correctly when border-collapse

本文关键字：单元格 属性 复制 折叠 边框      更新时间：2023-09-26

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

代码很简单：

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/

一个变通方法（如图所示，但已注释完毕）是检查最终的表格大小，如果它们不相等，则在写入之前（巧妙地）在宽度上添加W。

这种行为看起来像是一个bug（使用Chrome）。显然这是一个特色。我在这里错过了什么？

而且，这里是修复：

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/

相关文章：