直接给table加overflow-x:auto无效，因table是独立格式化上下文且不响应overflow属性；必须用设width:100%、overflow-x:auto、white-space:nowrap、-webkit-overflow-scrolling:touch的div包裹，并为table设置table-layout:fixed和min-width:fit-content。
直接给 table 加 overflow-x: auto 无效——滚动必须由外层容器控制，且表格自身宽度行为必须被约束，否则它会撑破父容器、滚动条根本不会出现。
为什么 table 自身设 overflow-x 不起作用
浏览器把 table 当作一个“自动伸缩的块级元素”，默认会尽可能扩展宽度来容纳所有列内容。即使你写了 overflow-x: auto，只要它的实际宽度没超过父容器，就不会触发滚动。更关键的是：table 元素不支持 overflow 属性（部分浏览器会忽略），真正起作用的只能是包裹它的 div。
- 常见错误现象：
table把整个页面横向撑开，右侧出现空白滚动条但无法拖动 - 根本原因：滚动容器缺失，或容器没有明确宽度限制
- 验证方法：在 DevTools 中检查
table的 computed width，大概率是远超视口宽度的（比如1248px）
必须设置的外层容器样式
滚动行为完全依赖这个包裹 div，它要同时满足三个条件：有宽度上限、启用横向溢出、阻止内部换行干扰计算。
-
width: 100%或max-width: 100vw（避免意外撑宽） -
overflow-x: auto（用auto而非scroll，防止空滚动条） -
white-space: nowrap（防止单元格内文本换行，导致列宽误判） -
display: block（确保不是被父级 flex 压缩成零宽） -
-webkit-overflow-scrolling: touch（iOS Safari 必加，否则触控拖拽卡顿或失灵）
table 本身的关键约束项
光靠外层容器还不够，table 必须放弃“自适应宽度”的默认逻辑，否则某列一张大图或长链接就会让它再次失控。
-
table-layout: fixed：强制按列定义宽度，不随内容重算——这是最核心的一条 -
width: 100%或min-width: fit-content（前者适配容器，后者保内容不压缩；二者二选一，不要同时写） - 每列
th/td显式设width或max-width（例如width: 120px或max-width: 160px） - 避免
flex、transform、will-change等属性出现在滚动容器或其祖先上，它们会破坏 iOS 滚动事件捕获
移动端 Safari 特别注意事项
iOS 的 WebKit 对 overflow-x 支持较弱，很多失效都源于细节遗漏。
- 确认
<meta name="viewport">包含width=device-width，且没有user-scalable=no（后者会禁用双指缩放，也常连带影响滚动惯性） - 如果表格嵌套在
flex容器里，父级需加align-items: flex-start或flex-shrink: 0，否则可能被压缩 - 检查是否有
overscroll-behavior: contain在祖先节点上，它会拦截横向滚动传递 - 真机测试时，优先用 Safari 和微信内置浏览器，Chrome for iOS 实为 WebKit 内核，表现一致
最容易被忽略的是 table-layout: fixed 和外层 white-space: nowrap 的组合——缺一不可。前者管列宽分配逻辑，后者管单元格内文本是否折行，两者共同决定表格最终宽度是否可控。没有它们，其他所有设置都是在修修补补。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
