如何让并排表格宽度适配页面并保持横向排列？

方案1：修复浮动布局（兼容旧浏览器） #

给每个表格添加width: 50%和box-sizing: border-box样式，同时清除默认外边距，确保表格的边框、内边距都包含在50%宽度内，避免总宽度溢出换行。外层容器添加清除浮动的样式，防止影响后续元素。

修改后代码：

<div style="overflow: hidden;">
  <table style="float: left; width: 50%; box-sizing: border-box; margin: 0;">
    <thead>
        <tr>
             <th>A</th>
        </tr>
    </thead>
    <tbody>
        <tr>
             <td>100</td>
        </tr>
    </tbody>
  </table>

  <table style="float: left; width: 50%; box-sizing: border-box; margin: 0;">
    <thead>
        <tr>
             <th>B</th>
        </tr>
    </thead>
    <tbody>
        <tr>
             <td>200</td>
        </tr>
    </tbody>
  </table>
</div>

方案2：使用Flex布局（推荐，适配现代浏览器） #

用flex容器包裹两个表格，设置容器宽度为100%，表格宽度设为50%。Flex布局会自动处理元素并排，无需手动管理浮动，更简洁稳定。

修改后代码：

<div style="display: flex; width: 100%;">
  <table style="width: 50%;">
    <thead>
        <tr>
             <th>A</th>
        </tr>
    </thead>
    <tbody>
        <tr>
             <td>100</td>
        </tr>
    </tbody>
  </table>

  <table style="width: 50%;">
    <thead>
        <tr>
             <th>B</th>
        </tr>
    </thead>
    <tbody>
        <tr>
             <td>200</td>
        </tr>
    </tbody>
  </table>
</div>

核心说明 #

• box-sizing: border-box：确保元素的宽度计算包含边框和内边距，避免额外宽度导致总占比超过100%。
• Flex布局：天然支持弹性并排，无需处理浮动清除等问题，是现代页面布局的首选方式。

内容的提问来源于stack exchange，提问作者Inf Jhoanny