Javascript 两个表之间的同步列宽为；边界塌陷：塌陷“；不在谷歌浏览器中工作

我有两个表，希望使用Javascript同步它们的列宽。 只要我不设置CSS属性

border collapse:collapse用于我的表

当我这样做时，同步在谷歌浏览器中无法正常工作。
不过，在Firefox中，一切仍按预期运行

我按照在上的建议尝试了这一点，但没有成功：

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

有关完整的示例和我尝试过的另一种方法，请参见此JSFIDLE：

我错过了什么？为什么这在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属性显式指定为
fixed
：

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

第二，调整了列的宽度后，表的大小不再相同。通过执行以下Javascript确保它们是正确的：

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

一个在Chrome和Edge中运行的完整JSFIDLE演示可用。
wow，这正是我想要的。我尝试了
表格布局：固定之前，但我不认识，之后的表大小不一样。您的JSFIDLE也可以在Firefox中使用：）
var table_width = $("#t1").width()
$("#t1, #t2").width(table_width);