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

本文介绍通过 css flexbox 快速解决多表格水平并排时因宽度超限导致重叠或截断的问题，无需 javascript 或复杂计算，仅需几行样式即可让表格自动等宽压缩、均匀占满容器。

本文介绍通过 css flexbox 快速解决多表格水平并排时因宽度超限导致重叠或截断的问题，无需 javascript 或复杂计算，仅需几行样式即可让表格自动等宽压缩、均匀占满容器。

在网页开发中，当需要在同一行内并排展示两个或多个表格（如对比数据、双栏报表等）时，常因表格默认 display: table 的固有宽度行为导致整体溢出容器——表现为右侧表格被裁剪、遮挡，或与相邻元素重叠（如问题中所示的“仅显示一半”现象）。传统方案（如强行设置 width: 50%、缩放 transform: scale() 或 JS 动态计算）易引发响应性失效、内容挤压变形或维护困难等问题。

Flexbox 是最简洁可靠的现代解决方案。其核心逻辑在于：将表格容器设为 display: flex，再通过 flex-grow: 1 让每个

以下是完整实现代码：

AI Room Planner

AI 室内设计工具，免费为您的房间提供上百种设计方案

下载

<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>¥89</td><td>2024-04-01</td></tr>
      <tr><td>B款</td><td>95</td><td>¥129</td><td>2024-04-02</td></tr>
    </tbody>
  </table>

  <table>
    <thead>
      <tr>
        <th>渠道</th>
        <th>访问量</th>
        <th>转化率</th>
        <th>来源</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>官网</td><td>3,240</td><td>3.2%</td><td>直接访问</td></tr>
      <tr><td>微信</td><td>1,870</td><td>5.7%</td><td>公众号</td></tr>
    </tbody>
  </table>
</section>

.table-container {
  display: flex;
  gap: 1.2rem; /* 表格间留白，推荐使用 rem/em 提升可访问性 */
  width: 100%;  /* 确保父容器充分利用上下文宽度 */
}

.table-container table {
  flex-grow: 1;     /* 关键：允许表格弹性扩张填充剩余空间 */
  min-width: 0;     /* 重要！防止表格内容（如长文本）强制撑开容器 */
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table-container th,
.table-container td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e0e0e0;
  text-align: left;
}

✅ 关键要点说明：

• flex-grow: 1 使每个表格按权重均分父容器剩余空间，天然实现“压缩”效果；
• min-width: 0 是隐藏但至关重要的声明——它允许表格在内容过长时主动收缩（而非默认的 min-width: auto 强制保持最小内容宽度），避免 flex 容器溢出；
• 避免对

? 进阶提示：如需三表并列，只需保持相同结构，Flexbox 会自动三等分；若某表需更大占比（如主表占 60%，副表占 40%），可分别设置 flex: 6 和 flex: 4（基于比例关系）。最终效果完全响应式，在移动设备上可通过媒体查询改为 flex-direction: column 实现垂直堆叠，确保全端体验一致。