根本原因是table默认display: table且内容撑宽父容器，导致溢出不发生；必须用设width和overflow-x:auto的块级容器包裹，并让table设display:block或table-layout:fixed、th/td加white-space:nowrap，iOS还需-webkit-overflow-scrolling:touch。
为什么加了 overflow-x: auto 表格还是不滚动
根本不是样式没写对，而是表格的默认行为在捣鬼：table 是 display: table，它的 td 和 th 会主动撑宽父容器，导致“溢出”根本不会发生——滚动自然失效。单纯给 <table> 加 <code>overflow-x: auto 完全没用，必须用块级容器包裹，且这个容器得有明确宽度参照。
常见错误现象包括：页面被表格横向撑开、滚动条压根不出现、iOS 上能看见滚动条但无法拖拽。
- 外层容器必须是
display: block（不能是inline或嵌套在flex里没设min-width: 0） - 容器要同时设
overflow-x: auto和width: 100%（或具体值），缺一不可 - 别在容器上加
white-space: nowrap，它只对行内元素起作用，加了反而让文字更宽
必须加的三个 CSS 配合点：table-layout: fixed、white-space: nowrap、min-width
table-layout: fixed 是关键开关。不设它，列宽由内容决定，小屏下长文本或图片一挤，整张表就糊成一团，white-space: nowrap 也救不回来。它让表格按首行 <th> 或 <code><col> 的宽度分配列，才真正可控。
white-space: nowrap 必须加在 <th> 和 <code><td> 上，不是加在 <code><table> 或外层 <code><div>。否则单元格内文字换行，高度突变，列宽计算就乱了。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li><code><table> 上加 <code>table-layout: fixed，并配合 min-width: fit-content 或具体值（如 min-width: 600px），防止被压缩到无法阅读
<th> 和 <code><td> 统一加 <code>white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
<table> 设 <code>width: 100%，它会覆盖 table-layout: fixed 的列宽分配逻辑
iOS Safari 滚动卡顿或无法拖拽怎么办
iOS Safari（包括微信内置浏览器）对 overflow-x: auto 的触控支持不完整，尤其当容器被嵌套在 flex 布局中、或加了 transform、will-change 等属性时，滚动事件可能直接被拦截。
- 外层容器必须加
-webkit-overflow-scrolling: touch，这是激活原生惯性滚动的必要条件 - 检查父元素是否用了
overscroll-behavior: contain，它会阻止滚动传递，需移除 - 避免在滚动容器上设置
transform、will-change、filter等触发合成层的属性 - 如果容器是
flex子项，务必加min-width: 0，否则 flex item 默认不收缩，滚动区会被“锁死”
移动端表格列宽失控导致滚动失效
即使容器和表格都设对了，只要某列内容（比如未约束的 <img alt="如何实现表格在移动端的响应式横向滚动_通过CSS overflow-x和white-space" >、无限制的长 URL、input 或未设 max-width 的 div）没有宽度约束，表格仍会无限撑宽，滚动还是出不来。
这不是 bug，是 CSS 表格渲染机制决定的：哪怕其他列都缩得很窄，只要有一列“撑不住”，整张表宽度就上去了。
- 给图片加
max-width: 100%; height: auto; - 给长文本容器（如
<div class="text">）加 <code>max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - 避免在
<td> 内直接放 <code>display: flex或display: grid的子容器，它们可能隐式撑宽；如有必要，加min-width: 0最易被忽略的是：所有这些规则必须同时生效才有用。少一个，滚动就可能在某个机型或浏览器里突然失灵。
