如何让左浮动的宽表格并排显示并出现横向滚动条？

核心思路 #

给三个表格添加包裹容器，通过容器控制内容的溢出行为，同时确保表格不会被压缩或自动换行。以下是两种简单可行的实现方式：

方法一：Flex布局（推荐，现代且简洁） #

步骤1：修改HTML，添加包裹容器 #

在三个表格外层套一个div容器：

<body>
  <div class="table-container">
    <!-- 2020表格 -->
    <table class="info">
      <tr>
        <td>
          <table>
            <h4 align="center">2020</h4>
            <tr>
              <th style="max-width:100%">Amount</th>
              <th style="max-width:100%">Notes</th>
            </tr>
            {% for abon in abonnements %}
            <tr>
              <td>{{abon.data|dictionary_items:"2020"|dictionary_items:"amount"|default_if_none:""}}</td>
              <td>{{abon.data|dictionary_items:"2020"|dictionary_items:"notes"|default_if_none:""}}</td>
            </tr>
            {% endfor %}
          </table>
        </td>
      </tr>
    </table>

    <!-- 2021表格 -->
    <table class="info">
      <tr>
        <td>
          <table>
            <h4 align="center">2021</h4>
            <tr>
              <th style="max-width:100%">Amount</th>
              <th style="max-width:100%">Notes</th>
            </tr>
            {% for abon in abonnements %}
            <tr>
              <td>{{abon.data|dictionary_items:"2021"|dictionary_items:"amount"|default_if_none:""}}</td>
              <td>{{abon.data|dictionary_items:"2021"|dictionary_items:"notes"|default_if_none:""}}</td>
            </tr>
            {% endfor %}
          </table>
        </td>
      </tr>
    </table>

    <!-- 2022表格 -->
    <table class="info">
      <tr>
        <td>
          <table>
            <h4 align="center">2022</h4>
            <tr>
              <th style="max-width:100%">Amount</th>
              <th style="max-width:100%">Notes</th>
            </tr>
            {% for abon in abonnements %}
            <tr>
              <td>{{abon.data|dictionary_items:"2022"|dictionary_items:"amount"|default_if_none:""}}</td>
              <td>{{abon.data|dictionary_items:"2022"|dictionary_items:"notes"|default_if_none:""}}</td>
            </tr>
            {% endfor %}
          </table>
        </td>
      </tr>
    </table>
  </div>
</body>

步骤2：添加Flex布局的CSS #

/* 包裹容器：允许横向滚动，子元素用flex排列 */
.table-container {
  display: flex;
  overflow-x: auto;
  gap: 15px; /* 可选：表格之间添加间距 */
  padding: 10px 0; /* 可选：上下添加内边距，避免滚动条贴边 */
}

/* 表格样式：禁止被压缩，保持40%宽度 */
table.info {
  flex-shrink: 0;
  width: 40%;
}

方法二：Inline-block + 容器nowrap #

如果需要兼容旧浏览器，可以用这种方式：

CSS代码 #

.table-container {
  white-space: nowrap; /* 强制子元素不换行 */
  overflow-x: auto; /* 内容超出时显示横向滚动条 */
  padding: 10px 0;
}

table.info {
  display: inline-block; /* 让表格并排 */
  width: 40%;
  vertical-align: top; /* 确保表格顶部对齐 */
  margin-right: 15px; /* 可选：表格之间的间距 */
}

/* 去掉最后一个表格的右边距，避免多余空白 */
table.info:last-child {
  margin-right: 0;
}

为什么之前的float方案不行？ #

三个各占40%宽度的表格总宽度是120%，超过了父容器（默认body是100%宽度），float元素会自动换行；同时body没有设置横向溢出控制，即使强行不换行也不会出现滚动条。用包裹容器后，容器允许内容超出自身宽度，overflow-x: auto会在内容超出时自动显示滚动条，同时通过flex或inline-block确保表格保持并排。

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