直接给table加overflow-x:auto无效，因table默认display:table不响应overflow属性；必须用div包裹并设width:100%、overflow-x:auto、-webkit-overflow-scrolling:touch，且table需设table-layout:fixed和min-width:fit-content。
为什么直接给 table 加 overflow-x: auto 没用
浏览器规范里明确写了：table 默认是 display: table，它不响应 overflow 属性。你加了也白加，控制台不会报错，但滚动条就是不出现在表格区域——实际是整页被撑宽，或者根本拖不动。
真正起作用的必须是块级容器，比如 div。只有它能触发 BFC、识别“内容超宽”、并允许手势横向拖拽。
-
table自身设width: 100%反而会锁死宽度，失去溢出条件 - 父容器如果是
display: flex或display: grid，又没配min-width: 0，子项（即包裹div）会被压缩，滚动直接失效 - iOS Safari 对这类滚动更敏感，缺了
-webkit-overflow-scrolling: touch就容易卡顿或滑不动
正确的包裹结构和最小必要样式
核心不是调 table，而是让外层 div “守规矩”：能感知宽度边界、能响应触摸、不被上级截断。
- 用
<div class="table-wrapper"><table>...</table></div>包裹，不要跳过这层 -
div.table-wrapper必须有width: 100%（或max-width: 100%），且不能是inline类型 - 加
overflow-x: auto和overflow-y: hidden（避免意外纵滚干扰） - iOS 真机必须加
-webkit-overflow-scrolling: touch，否则拖拽迟钝甚至无响应 -
table自身去掉width: 100%，让它按内容自然撑开；列宽控制改用min-width或<col>配合table-layout: fixed
table-layout: fixed 是滚动顺滑的关键
默认 table-layout: auto 会让浏览器逐列计算宽度，遇到长文本（比如无空格 URL、JSON 字段）时，整行突然变宽，滚动条“跳动”，体验极差。
- 启用
table-layout: fixed后，列宽由首行<th> 或 <code><col>决定，渲染快、滚动跟手 - 必须搭配
w-full（Tailwind）或width: 100%（原生 CSS），否则列宽约束不生效 - 如果列宽差异大、内容不可控，可用
table-layout: auto+whitespace-normal break-all，但要实测小屏下是否某列仍意外拉宽整行 - 含
<textarea></textarea>、<pre class="brush:php;toolbar:false;"></pre>或代码块的单元格，table-layout: fixed更可靠——它能硬性约束宽度，防止撑破 - 包裹
div若在 Flex 布局中，父级可能压缩高度，导致滚动失效；加flex-shrink-0（Tailwind）或flex-shrink: 0（原生）保高 - 单元格里如果有未设
max-w-full的图片、<pre class="brush:php;toolbar:false;"></pre>或嵌套<div>，它们会绕过滚动保护，直接撑破容器 <li>Bootstrap 等框架默认给 <code>th/td设white-space: nowrap，长文本无法换行，必须显式覆盖为white-space: normal -
min-width: fit-content在 Safari 14.1+ 和 Chrome 107+ 才稳定支持；旧版 Safari 可退为min-width: 600px（按实际列数估算）
移动端真机测试绕不开的几个坑
Chrome DevTools 模拟器看不出问题，但 iOS Safari 和部分安卓 WebView 会暴露真实缺陷。
最常被忽略的是：滚动是否生效，不取决于你写了多少类名，而取决于外层容器有没有真正“框住”表格内容——它得知道“宽到哪该停”，还得允许手指把它“拖出来”。真机上滑两下，比看十遍文档都管用。
