直接给table加overflow-x:auto无效，因其默认为独立格式化上下文且“内容驱动宽度”，会无视自身溢出设置并撑宽父容器；必须用设width:100%、overflow-x:auto、-webkit-overflow-scrolling:touch的<div>包裹，并将table设为display:block、min-width:max-content、white-space:nowrap且禁用width:100%。
为什么直接给 table 加 overflow-x: auto 没用
因为 table 默认是「内容驱动宽度」的块级元素，它会不断撑宽自己来容纳所有列，浏览器根本判断不出“哪里溢出了”。滚动行为必须由父容器触发，且该容器得有明确的宽度边界——否则 overflow 就是空转。
- 常见错误现象：
table把整个页面横向撑开，滚动条压根不出现；或者只在 Chrome 里有效，iOS Safari 完全不动 - 关键点：滚动容器必须是
<div>这类普通块容器，不是<table> - 如果父容器是
display: flex或display: grid，记得加min-width: 0，否则子项（即你的表格容器）拒绝收缩
overflow-x: auto 容器必须配哪些样式才生效
光写 overflow-x: auto 是最低限度，缺了下面任意一条，移动端大概率失效。
- 外层
<div class="table-container">必须设width: 100%（或具体像素值），不能靠max-width单独撑住 - 加
-webkit-overflow-scrolling: touch—— iOS Safari 和微信内置浏览器至今仍依赖它实现惯性滚动，不加就是“一拖就停” - 避免同时在该容器或其父级上使用
transform、will-change或overscroll-behavior: contain，这些会劫持滚动事件 - 如果容器被嵌套在
flex布局中，确保它自身是display: block，别被 flex 的默认对齐逻辑干扰
table 本身要怎么约束才不会撑爆容器
即使容器设置正确，table 内部若没做宽度控制，照样会无视边界无限扩张。
- 去掉
table { width: 100% }—— 它会让表格强行填满，掩盖真实溢出，失去滚动前提 - 改用
min-width: max-content或min-width: fit-content，让表格“至少撑到内容所需最小宽度”，这是触发横向滚动的关键 - 所有
<td>和<th>加white-space: nowrap，防止长文本自动换行压缩列宽，导致宽度计算失真 - 启用
table-layout: fixed，配合<col>或首行<th>的width设置，才能让列宽真正可控；注意 Safari 对百分比width支持不稳定，优先用像素值
移动端滚动卡顿、拖不动的典型诱因
不是代码写错了，而是某些 CSS 属性在 iOS 渲染流水线里天然冲突。
立即学习“前端免费学习笔记（深入）”；
- 滚动容器内嵌了
position: sticky的<thead>？原生table+sticky在 overflow-x 容器里几乎必崩，渲染盒模型错乱 - 用了
display: grid或flex模拟表格但没设min-width: 0，子项僵住不缩 - 表格里塞了未约束尺寸的图片、
<input>或长 URL，它们会单方面撑宽整列，white-space: nowrap也救不了 - 全局写了
html, body { overflow-x: hidden }却忘了移除，把滚动容器的溢出权限直接封死了
最常被忽略的一点：不是所有“看起来像表格”的结构都适合用原生 table。当列数多、交互复杂、还要固定表头或首列时，display: grid 或 display: table 模拟方案反而更可控——只是得手动补 role="table" 等语义属性。
