html - 如何在不设置宽度的情况下让两个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

父元素设置 flex 布局

div {    display: flex;}

Answer 2

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

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

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

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

Answer 3

你可以使用 CSS 的 flexbox 布局来使两个 table 水平对齐。以下是如何做到这一点的步骤：

1. 将包含两个 table 的容器设置为 display: flex。这将使该容器成为 flex 容器，其子元素（即两个 table）将成为 flex 项。
2. 使用 justify-content: space-between 属性将两个 table 水平对齐。

以下是相应的 CSS 和 HTML 代码：

<style>    .table-container {        display: flex;        justify-content: space-between;    }</style><div class="table-container">    <table class="table table-bordered" style="width: 100%;">        <!-- ... -->    </table>    <table class="table table-bordered" style="width: 100%;">        <!-- ... -->    </table></div>

这样，两个 table 将水平对齐，并且它们之间的空间分布均匀。如果你想进一步调整间距，你可以添加一个 margin 到 table 元素上。