表格容器需设为显式可滚动（如 overflow-x: auto 的父 div），再对其应用 overscroll-behavior-x: contain；table 标签直接设置无效，且 iOS 15.x 及更早版本不支持该属性，需用箭头按钮或 scrollBy() 等降级方案。
表格容器必须显式可滚动才能触发 overscroll-behavior-x
直接给 <table> 标签加 overscroll-behavior-x: none 没用——<table> 默认不产生滚动块，浏览器根本不检查它的 overscroll 行为。真正要设样式的，是包裹表格的、设置了 overflow-x: auto 的父容器（比如 <div class="table-wrapper">）。
这个容器还必须满足三个条件：有明确宽度限制（如 max-width: 100vw）、内容真实溢出（表格列总宽 > 容器宽）、且未被 flex/grid 父级撑开导致高度塌陷（必要时加 min-width: 0 或 overflow: hidden）。
- 错误写法：
table { overscroll-behavior-x: none; }→ 属性被忽略 - 正确结构：
<div class="table-wrapper"><table>...</table></div>，样式作用于.table-wrapper - 若用
display: block强制表格变块级，仍需外层容器控制 overflow，不能跳过这层
overscroll-behavior-x: contain 比 none 更适合表格场景
对横向滚动表格，优先用 overscroll-behavior-x: contain，而不是 none。因为 none 会彻底禁掉本层的弹性回弹（iOS 上滑到左/右边界时无反馈），用户可能误判是否已到尽头；而 contain 允许本地回弹，只阻止事件向上传播（比如防止页面整体被拖动），体验更自然。
- 典型需求：表格在 modal 内横向滚动，不希望手指划出表格边界时拖动背景页 → 用
contain - 仅当表格是全屏画布、绝对不允许任何回弹（如数据看板）才考虑
none，但需确认无第三方库依赖 scroll 事件 - 别混用
touch-action: pan-y和overscroll-behavior-x：前者会直接禁掉横向手势，后者只是链路控制，二者逻辑冲突
iOS Safari 下表格横向滚动失效的常见原因
即使样式写对了，在 iOS Safari（尤其 15.x）里仍可能无效，主要因为渲染层判断失败：
立即学习“前端免费学习笔记（深入）”；
- 父容器用了
transform或will-change→ 创建新层叠上下文，干扰滚动链路识别 - 表格内用了
white-space: nowrap但没配min-width: fit-content→ 浏览器可能无法准确计算溢出宽度 - 容器高度由 flex 自动撑开，但未设
min-height: 0→ 导致内部表格高度塌陷，滚动行为不可预测 - viewport 设置了
user-scalable=no或height=device-height→ 部分旧版 Safari 会降级处理 overscroll 控制
兼容性 fallback 必须针对老 iOS 单独处理
overscroll-behavior-x 在 Safari 16.4+ 才稳定支持，而大量存量 iPhone 还在运行 iOS 15.x 或更早版本。这些设备上该属性完全被忽略，不能靠 JS 拦截 touchmove 来模拟——那样会破坏惯性滚动、输入框聚焦自动定位等原生行为。
真正可用的降级方案只有两个：
- 对老 iOS，把表格横向操作入口显性化：加左右箭头按钮，或用
scrollBy()+scrollend事件做可控滚动 - 用
scrollWidth - clientWidth > 1动态判断是否真有溢出，再决定是否显示滚动提示（如底部阴影），而非强行禁手势
表格边缘滑动不是“要消灭的行为”，而是用户探索数据的自然路径；重点不是禁止它，而是确保它只影响表格本身，不连带拖垮整个页面。
