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中的魅力一样在谷歌浏览器中产生如此糟糕的结果？

我的示例表：

<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

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

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

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

在两个表格之间同步列宽，其中＆＃34; border-collapse：collapse＆＃34;没有使用谷歌浏览器

1 个答案: