在具有“边框折叠：折叠”的两个表格之间同步列宽在谷歌浏览器中不起作用

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 属性明确指定为fixed：

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

其次，在您调整了列的宽度后，您的表格不再是相同的大小。通过执行以下 Javascript 确保它们是：

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

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