移动端表格横向滚动失效的主因是外层容器缺宽度约束、table被width:100%锁死、未设-webkit-overflow-scrolling:touch；须用div.table-container设width+overflow-x:auto，table改min-width:max-content并加white-space:nowrap。
移动端表格横向滚动不生效，八成是因为外层容器没设宽度约束、table被width: 100%锁死，或者漏了-webkit-overflow-scrolling: touch——这三者缺一不可。
外层容器必须设 width + overflow-x: auto
直接给 table 加 overflow-x: auto 完全无效。浏览器根本不识别表格自身的溢出行为，滚动必须由块级父容器控制。
-
div.table-container必须有明确宽度：用width: 100%或max-width: 100vw，不能是display: inline或未设宽的 flex 子项 - 如果父级是
display: flex，这个容器要加min-width: 0，否则它拒绝收缩，滚动区形同虚设 - 避免同时设
overflow-y: hidden，某些安卓 WebView 下会意外截断表格高度
table 本身禁用 width: 100%，改用 min-width: max-content
width: 100% 是横向滚动失效的隐形杀手：它强制表格拉满容器宽度，掩盖真实内容宽度，导致“没溢出”假象。
- 删掉所有
table { width: 100% }，换成min-width: max-content（最稳妥）或具体值如min-width: 600px - 若需列宽可控，优先用
<col style="width: 120px">，别用百分比——Safari 对table-layout: fixed+ 百分比支持不稳定 - 加
table-layout: fixed可防某列（如图片、URL）无限撑宽，但启用后<td>内块级元素可能被截断，需额外处理
th 和 td 必须统一加 white-space: nowrap
单元格默认换行，会把长文本压成多行，破坏宽度计算逻辑，导致表格实际宽度远小于视觉预期。
立即学习“前端免费学习笔记（深入）”；
- 写死
th, td { white-space: nowrap; }，不要只加在某几列 - 内容含超长 URL 或无空格字符串时，额外加
overflow: hidden; text-overflow: ellipsis;防止无限撑宽 - 千万别对外层容器设
white-space: nowrap——它会让整个滚动区文字不折行，反而更易溢出失控
iOS Safari 必须加 -webkit-overflow-scrolling: touch
不加这句，iOS 上手指一抬就停，拖不动、没惯性、回弹生硬——不是 bug，是 Safari 渲染策略限制。
- 只对滚动容器加，比如
.table-container { -webkit-overflow-scrolling: touch; }，不要全局设置（有内存泄漏风险） - 该属性仅在
overflow-x为auto或scroll时生效，hidden下无效 - 现代 iOS（16+）已弱化依赖，但 iOS 15 及更早版本仍需保留；可用
@supports (-webkit-overflow-scrolling: touch)做渐进增强 - 禁用
transform、will-change、filter等属性——它们会关闭原生滚动加速，让-webkit-overflow-scrolling失效
真正容易被忽略的是：表格语义结构（thead/tbody）本身不影响滚动行为，但会影响可访问性和 JS 行为；如果后续要加合计行或排序，滚动容器的 DOM 层级必须保持干净，否则像 Element Plus 这类组件会把滚动条插错位置。
