"border-collapse: collapse" 在 google chrome 中不起作用的两个表之间同步列宽

Question

我有两个表，想使用 Javascript 同步它们的列宽。只要我不为我的表设置 CSS 属性 border-collapse: collapse;，它就会在 Google Chrome 中正常工作。

当我这样做时，同步在 Google Chrome 中无法正常工作。不过，在 Firefox 中，一切仍按预期工作。

我按照的建议进行了尝试，但没有成功：

$("#t1").width($("#t2").width());
$("#t1 tr td").each(function (i){
       $(this).width($($("#t2 tr:first td")[i]).width());
})

请参阅此 JSFiddle 以获取完整示例和我也尝试过的其他方法：http://jsfiddle.net/gnskjveq/3/

我在这里错过了什么？为什么这在 Firefox 中像一个魅力一样工作并且在 Google Chrome 中给出如此糟糕的结果？

我的示例表：

<table id="t1" class="standard"> 
<tr> 
    <td>Name</td><td>User Image</td><td>Email</td><td>Favorite Language</td>
</tr>
</table>

<!-- table "t2" intended to have equal column widths -->
<table id="t2" class="standard">
<tr>
<!-- Lots of crazy stuff of wildly varying widths -->
    <td>12345678901234567890A</td>
    <td>123456789012345678901234567890A</td>
    <td>12345678901234567890A</td>
    <td>1234567890A</td>
</tr>
<tr>
<!-- Lots of crazy stuff of wildly varying widths -->
    <td>12345678901234567890A</td>
    <td>1234567890A</td>
    <td>123456789012345678901234567890A</td>
    <td>12345678901234567890A</td>
</tr>
<tr>
<!-- Lots of crazy stuff of wildly varying widths -->
    <td>12345678901234567890A</td>
    <td>1234567890A</td>
    <td>123456789012345678901234567890A</td>
    <td>12345678901234567890A</td>
</tr>
</table>

和对应的CSS（准确的说是SCSS）：

table.standard {
    border-collapse: collapse;
    td, th {
        border-right: 3px solid black;
        border-bottom: 3px solid black;
        padding: 8px;
        margin: 0px;
    }
}

Answer 1

首先，确保将表的 table-layout CSS 属性明确指定为 fixed:

table.standard {
    table-layout: fixed;
    [...]
}

其次，调整列宽后，表格的大小不再相同。通过执行以下命令确保它们是 Javascript:

var table_width = $("#t1").width()
$("#t1, #t2").width(table_width);

一个完整的 JSFiddle 演示，可在 Chrome 中运行，Edge 可用 here。

"border-collapse: collapse" 在 google chrome 中不起作用的两个表之间同步列宽

sync column width between two tables having "border-collapse: collapse" not working in google chrome

javascript

synchronization

google-chrome

html-table

width