直接给table加overflow-x:auto无效，必须用div包裹并设width:100%、min-width:fit-content、overflow-x:auto及-webkit-overflow-scrolling:touch，且table需配table-layout:fixed和th/td上white-space:nowrap。
直接给 table 加 overflow-x: auto 无效，滚动必须由块级容器触发，且需同时满足宽度约束、内容不被压缩、iOS 触控支持三个硬条件。
外层容器必须同时设 width: 100% 和 min-width: fit-content
缺一不可：width: 100% 确保容器参与文档流并提供滚动基准；min-width: fit-content 是让内容“撑得出来”的开关——它强制按单元格原始宽度计算容器最小宽度，否则表格会主动压缩列宽、文字换行，根本不会溢出，滚动条自然不出现。
- Safari 14.1+ / Chrome 107+ 支持稳定；旧版 Safari 可退为
min-width: 600px（按列数粗略估算） - 若该容器是
flex子项，必须额外加min-width: 0，否则 flex 默认min-width: auto会锁死收缩，滚动直接失效 - 别在
table上设width: 100%，它会覆盖table-layout: fixed的列宽分配逻辑
table-layout: fixed 和 white-space: nowrap 必须配对加在正确位置
不设 table-layout: fixed，浏览器就按整行内容动态算宽，遇到无空格长文本（如 URL、JSON 字段），整行突然变宽，滚动条“跳动”；而 white-space: nowrap 必须加在 th 和 td 上，不是加在 table 或外层 div 上——否则单元格内文字换行，高度突变，列宽计算全乱。
- 列宽优先用
<colgroup></colgroup>控制：<col width="120"> <col width="200">，语义清晰且兼容性好 - 图片统一加
max-width: 100%，防止突破列宽 - 避免仅靠
th的width属性，某些浏览器中可能不生效
iOS Safari 滚动卡顿？-webkit-overflow-scrolling: touch 不是可选，是刚需
没有它，用户拖拽后松手，表格常回弹、无惯性、响应迟钝。但它只在特定条件下生效：
立即学习“前端免费学习笔记（深入）”；
- 必须加在外层
div.table-container上，不能加在table或更高层 - 容器不能有
transform、will-change、filter等触发合成层的属性，否则滚动事件可能被拦截 - 检查父元素是否用了
overscroll-behavior: contain，它会阻止滚动传递，需移除 - 若容器是 flex 子项，务必确认已设
min-width: 0
真机测试前必须确认的四件事
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 的组合：前者让内容撑得出来，后者让容器缩得进去，二者缺一，滚动就卡死在“看起来能滚、实际滚不动”的状态。
