如何在HTML中实现两个表格并列显示，内容过多时出现滚动条

要实现两个表格始终并列、第一个表格内容溢出时出现横向滚动条，可按以下方式实现：

核心逻辑 #

默认inline-block元素宽度完全由内容决定，总宽度超过父容器宽度时会自动换行，改用Flex布局控制行内强制不换行，配合溢出滚动属性即可解决该问题。

操作步骤 #

• 给两个表格包裹公共父容器，设置display: flex，强制子元素默认在同一行排列
• 给第一个表格额外包裹一层容器，设置overflow-x: auto和最大宽度，内容超出最大宽度时自动出现横向滚动条
• 可选配置：给表格添加white-space: nowrap属性，保证单元格内内容不自动折行，保证单元格宽度自适应

完整可运行代码 #

<div style="display: flex; gap: 12px; align-items: flex-start;">
  <!-- 第一个表格滚动容器 -->
  <div style="overflow-x: auto; max-width: 70%;">
    <table border=1>
        <tr>
            <td>Cell1 content</td>
            <td>Cell2 content</td>
            <td>Cell3 content</td>
            <td>Cell4 content</td>
            <td>Cell5 content</td>
            <td>Cell6 content</td>
            <td>Cell7 content</td>
            <td>Cell8 content</td>
            <td>Cell9 content</td>
            <td>Cell8 content</td>
            <td>Cell9 content</td>
            <td>Cell8 content</td>
            <td>Cell9 content</td>
            <td>Cell8 content</td>
            <td>Cell9 content</td>
        </tr>
    </table>
  </div>

  <table border=1>
      <tr>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
      </tr>
  </table>
</div>

参数说明 #

• gap：控制两个表格之间的间距，根据视觉需求调整数值即可
• align-items: flex-start：保证两个表格顶部对齐，避免高度不一致时出现垂直错位
• 第一个表格外层容器的max-width支持设置为固定像素值（如max-width: 800px）或百分比，按需调整即可。

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