直接给table加overflow-x:auto无效，因其为独立格式化上下文且display:table不响应overflow；必须用设width:100%、min-width:fit-content、overflow-x:auto和-webkit-overflow-scrolling:touch的div包裹，并配合table-layout:fixed与th/td上white-space:nowrap。
为什么直接给 table 加 overflow-x: auto 没用
浏览器根本不识别 table 元素自身的 overflow 设置——它默认是独立格式化上下文，且会主动撑宽父容器来容纳内容。滚动必须由块级容器触发，而 table 的 display: table 行为天然绕过这个机制。
.table-container 必须同时满足的四个硬条件
外层容器不是加了 overflow-x: auto 就万事大吉，缺一不可：
-
width: 100%：确保不脱离文档流，提供横向滚动的基准宽度 -
min-width: fit-content：关键开关，强制按内容原始宽度撑开，防止列被压缩换行；Safari 14.1+/Chrome 107+ 支持稳定，旧版 Safari 可退为min-width: 600px（按列数估算） -
-webkit-overflow-scrolling: touch：iOS Safari 滚动卡顿、松手回弹、无惯性的根本解法，不是可选，是刚需 -
min-width: 0：若该容器是flex子项，必须加此项，否则 flex 默认不收缩，滚动直接锁死
table 和单元格的配套约束不能少
只靠容器还不够，表格自身和单元格必须协同“拒绝压缩”：
- 移除
table上的width: 100%，它会覆盖table-layout: fixed的列宽分配逻辑 -
table-layout: fixed必须设在table上，否则长文本（如 URL、JSON 字段）会突然撑宽整行，导致滚动条跳动 -
white-space: nowrap必须加在th和td上，不是加在table或外层div；否则单元格内文字换行，高度突变，列宽计算全乱 - 图片统一加
max-width: 100%，防止突破列宽；列宽优先用<colgroup></colgroup>控制，语义清晰且兼容性好
真机测试前必须确认的四件事
Chrome DevTools 模拟器看不出问题，但 iOS Safari 实际体验可能完全失效：
- 检查滚动容器上是否误加了
transform、will-change或filter——这些会触发合成层，拦截滚动事件 - 确认父元素没设
overscroll-behavior: contain，它会阻止滚动传递，需移除 - 验证
-webkit-overflow-scrolling: touch是加在.table-container上，而不是更高层或table本身 - 如果用了
flex布局嵌套，务必确认该容器已设min-width: 0
最易被忽略的是 min-width: fit-content 和 min-width: 0 的组合：前者让内容撑得出来，后者让容器缩得进去，二者缺一，滚动就卡死在“看起来能滚、实际滚不动”的状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
