直接给table加overflow-x:auto无效，因表格是独立格式化上下文，无视自身overflow设置并优先按内容撑宽；必须用设width、overflow-x:auto、white-space:nowrap及-webkit-overflow-scrolling:touch的div包裹，并将table设为display:block和min-width:max-content。
直接给 table 加 overflow-x: auto 没用——滚动容器必须是它的父级 div，且这个 div 得有明确宽度限制和正确的 display 行为。
为什么 table 本身设 overflow-x 不生效？
表格默认是块级元素，但会自动撑宽以容纳所有内容，不响应父容器的 overflow 控制。浏览器把 overflow 当作“溢出裁剪”而非“可滚动区域”，而 table 的渲染逻辑让它绕过这个机制。
- 错误写法：
<table style="overflow-x: auto"> —— 滚动条永远不会出现 <li>正确结构：必须用 <code><div class="table-container"><table></table></div> -
.table-container要设display: block（尤其当它在 flex 容器里时，否则可能被压缩到 width: 0） - 必须加
-webkit-overflow-scrolling: touch到容器上，激活原生滚动引擎 - 避免在
.table-container或其任意祖先上使用transform、will-change、filter等触发合成层的属性 - 检查是否误用了
overscroll-behavior: contain—— 它会拦截滚动事件传递，删掉即可 - 如果父元素是
display: flex，给容器加min-width: 0防止 flex item 默认不收缩 <td> 和 <code><th> 必须统一设 <code>white-space: nowrap，否则文本换行会让列宽塌缩，失去横向延展前提- 移除
table上的width: 100%—— 它会强制压缩列，破坏滚动基础 - 用
min-width: fit-content或width: max-content替代，让表格按内容撑开 - 若某列含图片或 input，需额外约束：
img { max-width: 100%; height: auto; }，input { width: 100%; box-sizing: border-box; } - 启用后，列宽由
<col>或首行<th> 的 <code>width决定，不再随内容伸缩 - 推荐用像素值（如
width: 120px），Safari 对百分比 +table-layout: fixed支持不稳定 - 副作用：
<td> 内的块级子元素（如 <code><div>）可能被截断，需加 <code>overflow: visible或改用display: inline-block - 如果只是想“能滚”，不用也行；如果要列宽稳定、对齐精准，就用，并配
min-width保底
移动端 Safari 滚不动或卡顿怎么办？
iOS WebKit 对 overflow-x 的触控滚动支持弱，尤其嵌套在 flex/grid 或带 transform 的父元素中时，容易失灵或无惯性。
表格内容还是撑破容器、滚动不出现在哪？
常见原因是列宽失控或 white-space 干扰了宽度计算，不是 overflow 没起作用，而是根本没“溢出”。
要不要用 table-layout: fixed？
它不是必须，但能显著提升可控性——前提是你要精确控制列宽。
真正容易被忽略的是：滚动容器的 width 必须是“可测量”的——不能依赖 flex 自动分配，也不能在未设高度的 grid item 里直接放；一旦父布局剥夺了它的尺寸上下文，overflow-x 就彻底失效。
