直接给加overflow-x: auto无效，因其天生是独立格式化上下文，会撑宽父容器而非触发滚动；必须用包裹并同时满足四个条件：width: 100%、min-width: fit-content、-webkit-overflow-scrolling: touch、min-width: 0。
直接给 <table> 加 <code>overflow-x: auto 无效，必须用 <div> 包裹并满足四个硬性条件，否则 iOS Safari 滚不动、安卓 WebView 滚不稳、Chrome DevTools 里看着能滚，真机一滑就卡死。
<h3>为什么 table 元素自身加 overflow-x:auto 完全没用</h3>
<p>浏览器根本不处理 <code><table> 的 <code>overflow 声明——它天生是独立格式化上下文，会主动撑宽父容器来容纳内容，滚动事件根本不会触发。滚动行为只能由块级容器（如 <div>）发起，而 <code>display: table 天然绕过这个机制。
常见错误现象：<table> 上写了 <code>overflow-x: auto，但滚动条不出现；或者内容被换行、列宽塌缩、高度突变，导致视觉错乱。
- 别在
<table> 上设 <code>width: 100%，它会覆盖table-layout: fixed的列宽分配逻辑 - 别指望
white-space: nowrap加在<table> 或外层 <code><div> 上——必须加在 <code><th> 和 <code><td> 上，否则单元格内文字照常换行 <li>图片没加 <code>max-width: 100%？整列会被撑爆，滚动失效 -
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> 上的 <code>width: 100% -
table-layout: fixed必须设在<table> 上，不能只写在 <code><div> 或 <code><thead><li> <code>white-space: nowrap必须加在每个<th> 和 <code><td> 上，不是加在父元素 <li>列宽优先用 <code><colgroup></colgroup>控制，语义清晰且兼容性好；避免靠width写死在<th> 上，易被 flex 或百分比干扰 <h3>真机测试前必须确认的四件事</h3> <p>Chrome DevTools 模拟器看不出问题，但 iOS Safari 实际体验可能完全失效。</p> <ul> <li>检查滚动容器上是否误加了 <code>transform、will-change或filter——这些会触发合成层，拦截滚动事件 - 确认父元素没设
overscroll-behavior: contain，它会阻止滚动传递，需移除 - 验证
-webkit-overflow-scrolling: touch是加在.table-container上，而不是更高层或<table> 本身 <li>如果用了 flex 布局嵌套，务必确认该容器已设 <code>min-width: 0
外层容器 .table-container 必须同时满足的四个 CSS 条件
缺一不可，尤其 min-width: fit-content 和 min-width: 0 是一对矛盾又互补的开关：前者让内容撑得出来，后者让容器缩得进去。
table 和单元格必须协同“拒绝压缩”
只靠容器还不够，表格结构自身必须配合约束，否则长文本（如 URL、JSON 字段）会突然撑宽整行，导致滚动条跳动或列宽错位。
最易被忽略的是 min-width: fit-content 和 min-width: 0 的组合：二者缺一，滚动就卡死在“看起来能滚、实际滚不动”的状态。
