如何用 Flexbox 实现并排表格的自适应压缩与等宽布局

本文介绍如何利用 CSS Flexbox 解决两个表格因宽度过大而重叠、无法同时完整显示的问题，通过 display: flex 与 flex-grow: 1 实现自动等分容器空间、强制压缩表格宽度，确保双表并列可见且响应式友好。

本文介绍如何利用 css flexbox 解决两个表格因宽度过大而重叠、无法同时完整显示的问题，通过 `display: flex` 与 `flex-grow: 1` 实现自动等分容器空间、强制压缩表格宽度，确保双表并列可见且响应式友好。

当页面中存在多个

✅ 核心原理：弹性容器 + 均衡生长

Flexbox 默认启用 flex-wrap: nowrap，即子项不允许换行；当总固有宽度超容器时，浏览器会主动“压缩”可收缩子项以适配空间。但普通

Andi

智能搜索助手，可以帮助解决详细的问题

下载

以下为推荐实现代码：

<section class="table-container">
  <table>
    <thead>
      <tr>
        <th>产品</th>
        <th>销量</th>
        <th>单价</th>
        <th>日期</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>手机A</td><td>120</td><td>¥2999</td><td>2024-05-01</td></tr>
      <tr><td>耳机B</td><td>86</td><td>¥199</td><td>2024-05-02</td></tr>
    </tbody>
  </table>

  <table>
    <thead>
      <tr>
        <th>渠道</th>
        <th>访问量</th>
        <th>转化率</th>
        <th>ROI</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>官网</td><td>4,230</td><td>3.2%</td><td>2.8</td></tr>
      <tr><td>抖音</td><td>7,510</td><td>1.9%</td><td>1.5</td></tr>
    </tbody>
  </table>
</section>

.table-container {
  display: flex;
  gap: 1.2rem;     /* 表格间留白，替代 margin，更可控 */
  width: 100%;      /* 确保容器占满可用宽度 */
}

.table-container table {
  flex-grow: 1;     /* 关键：允许表格等比例扩展填充空间 */
  min-width: 0;     /* 必填！解除 table 的最小宽度保护，确保可压缩 */
  table-layout: fixed; /* 可选但推荐：提升渲染性能，配合 width 分配列宽 */
  border-collapse: collapse;
}

.table-container th,
.table-container td {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  text-align: left;
}

⚠️ 关键注意事项

• 必须设置 min-width: 0：

@media (max-width: 768px) {
  .table-container {
    flex-direction: column;
  }
}