如何在不设置宽度的情况下让两个table水平对齐?

Question

不设置宽度的情况下，有没有办法可以让两个 table 对其

<table class="table table-bordered" style="width: 100%;">
    <thead>
        <tr>
            <th width="1">#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Eugene</td>
            <td>Kopyov</td>
            <td>@Kopyov</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Victoria</td>
            <td>Baker</td>
            <td>@Vicky</td>
        </tr>
        <tr>
            <td>3</td>
            <td>James</td>
            <td>Alexander</td>
            <td>@Alex</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Franklin</td>
            <td>Morrison</td>
            <td>@Frank</td>
        </tr>
    </tbody>
</table>

<table class="table table-bordered" style="width: 100%;">
    <thead>
        <tr>
            <th width="1">Name</th>
            <th>Email</th>
            <th>Phone Number</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>[e-mail]</td>
            <td>(353) 01 222 3333</td>
            <td>Netherlands</td>
        </tr>
        <tr>
            <td>Mark</td>
            <td>[e-mail]</td>
            <td>(01) 22 888 4444</td>
            <td>Switzerland</td>
        </tr>
        <tr>
            <td>Eoin</td>
            <td>[e-mail]</td>
            <td>0097 22 654 00033</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Sarah</td>
            <td>[e-mail]</td>
            <td>[phone]</td>
            <td>France</td>
        </tr>
        <tr>
            <td>Afshin</td>
            <td>[e-mail]</td>
            <td>(353) 22 87 8356</td>
            <td>Norway</td>
        </tr>
    </tbody>
</table>

Answer 1

不知道是不是因为不想给每个 td 或者 th 去设置宽度呢，我猜想可能是因为这个原因吧，毕竟每个都要设置一下是挺烦的，而且代码看着也不干净。

那么你可以试一下 <col> 这标签。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

如果这个标签也不想用的话，那么就试一下 css 中的选择器方式吧，比如 td:nth-child(1) {} 之类的。

不过相对而言，推荐使用 col 这个标签。

Answer 2

父元素设置 flex 布局

div {
    display: flex;
}