本文介绍通过 css flexbox 快速解决多表格水平并排时因宽度超限导致重叠或截断的问题，无需 javascript 或复杂计算，仅需几行样式即可让表格自动等宽压缩、均匀占满容器。
本文介绍通过 css flexbox 快速解决多表格水平并排时因宽度超限导致重叠或截断的问题，无需 javascript 或复杂计算，仅需几行样式即可让表格自动等宽压缩、均匀占满容器。
在网页开发中，当需要在同一行内并排展示两个或多个表格（如对比数据、双栏报表等）时，常因表格默认 display: table 的固有宽度行为导致整体溢出容器——表现为右侧表格被裁剪、遮挡，或与相邻元素重叠（如问题中所示的“仅显示一半”现象）。传统方案（如强行设置 width: 50%、缩放 transform: scale() 或 JS 动态计算）易引发响应性失效、内容挤压变形或维护困难等问题。
Flexbox 是最简洁可靠的现代解决方案。其核心逻辑在于：将表格容器设为 display: flex，再通过 flex-grow: 1 让每个 <table> 主动伸展并均分可用空间，同时配合 gap 控制间距，彻底规避手动计算宽度或依赖固定像素值。
以下是完整实现代码：
<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 容器溢出；
- 避免对 <table> 直接设置 width（如 width: 50%），否则会与 flex-grow 冲突，失去响应弹性；
- 若需支持 IE11，可添加 -ms-flex: 1 前缀，但建议优先采用现代浏览器标准方案。
? 进阶提示：如需三表并列，只需保持相同结构，Flexbox 会自动三等分；若某表需更大占比（如主表占 60%，副表占 40%），可分别设置 flex: 6 和 flex: 4（基于比例关系）。最终效果完全响应式，在移动设备上可通过媒体查询改为 flex-direction: column 实现垂直堆叠，确保全端体验一致。
