javascript - 两个具有 "border-collapse: collapse"的表之间的同步列宽度在谷歌浏览器中不起作用

Question

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

当我执行此操作时，同步在 Google Chrome 中无法正常工作。不过，在 Firefox 中，一切仍然按预期工作。

我按照 https://stackoverflow.com/a/3580766 的建议尝试了此操作，但没有成功:

$("#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 属性固定为固定:

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

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

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

可以在 Chrome 和 Edge 中使用的完整 JSFiddle 演示 here .