如何使一个表的列宽始终与另一个表的相应列宽相匹配？

Question

我要求的内容很奇怪，但基本上我要说我有两张桌子：

＆＃13;

＆＃13;

<table id="table-1">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
    </tbody>
</table>
<table id="table-2">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

这两个表中的所有列都没有设置宽度。宽度取决于细胞的含量。现在表格具有相同的内容，因此所有列的宽度都相同。但是，让我们更改表-1中的一个单元格。

＆＃13;

＆＃13;

    <table id="table-1">
        <thead>
            <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>info</td>
                <td>This cell is different.</td>
                <td>info</td>
            </tr>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
        </tbody>
    </table>
    <table id="table-2">
        <thead>
            <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
        </tbody>
    </table>

＆＃13;

＆＃13;

＆＃13;

现在其中一个单元格有更多内容，因此表格1的第2列将变宽。我想要的是表2的第2列也要加宽，无论其单元的当前内容是什么。基本上，我希望通过Javascript和/或CSS在表-2中匹配表-1的列宽的任何动态变化。

Answer 1

嗯，是的，这很棘手，你想避免沿着测量单元格宽度的路径，并试图手动管理宽度。我建议您使用table-layout: fixed; width: 100%。这样可以使所有表列具有相同的宽度。该表将响应它的容器，因此如果两个表都在同一个容器中，它们应该具有相同的列宽。以下是一个示例：

＆＃13;

＆＃13;

table {
  table-layout: fixed;
  width: 100%;
}
table tr th {
  text-align: left;
}
.small-container {
  width: 60%;
}

＆＃13;

<table id="table-1">
        <thead>
            <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>info</td>
                <td>This cell is different.</td>
                <td>info</td>
            </tr>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
        </tbody>
    </table>
    <table id="table-2">
        <thead>
            <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
        </tbody>
    </table>
    
    <hr/>
    <h5>Small Container example</h5>
    <div class="small-container">
    <table id="table-1">
        <thead>
            <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>info</td>
                <td>This cell is different.</td>
                <td>info</td>
            </tr>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
        </tbody>
    </table>
    <table id="table-2">
        <thead>
            <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
            <tr>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
        </tbody>
    </table>
    </div>

＆＃13;

＆＃13;

＆＃13;