Question

我通过复制tr html然后复制第一个宽度来克隆表标题行。但这失败了，因为当边框：宽度减去W（宽度减去W）像素时，＆＃39; Wpx＆＃39;和边界崩溃：＆＃39;崩溃＆＃39;。如果未设置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]);});

小提琴显示问题：http://jsfiddle.net/marvmartian/9z24j7vz/4/

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

此行为似乎是一个错误（使用Chrome）。显然它是一个功能。我在这里缺少什么？

Answer 1

而且，这是修复：

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

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

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

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

1 个答案: