直接给table加overflow-x:auto无效，因table默认display:table不响应overflow；必须用div包裹并设width:100%、min-width:fit-content、overflow-x:auto及-webkit-overflow-scrolling:touch，且table需设table-layout:fixed和white-space:nowrap。
直接给 <table> 加 overflow-x: auto 没用，浏览器根本不认——滚动必须由块级容器触发，且需同时满足宽度约束、内容不被压缩、iOS 触控支持三个硬条件。
为什么外层 <div> 必须加 width: 100% 和 min-width: fit-content
表格默认会主动压缩列宽来适应窄屏，导致文字挤成一团、换行错乱，根本撑不出溢出宽度，滚动条自然不会出现。min-width: fit-content 是关键开关：它告诉浏览器“按内容原始宽度撑开，别压我”。width: 100% 则确保容器不脱离上下文流，为横向滚动提供基准参照。
-
fit-content在 Safari 14.1+ / Chrome 107+ 稳定支持；旧版 Safari 可退为min-width: 600px（根据列数估算） - 若父容器是
display: flex，必须给该<div>加min-width: 0，否则 flex item 默认不收缩，滚动直接锁死 - 不要在
<table>上设width: 100%，它会覆盖table-layout: fixed的列宽分配逻辑
table-layout: fixed 和 white-space: nowrap 必须配对使用
不设 table-layout: fixed，浏览器就按内容逐列计算宽度，遇到无空格长文本（如 URL、JSON 字段）时，整行突然变宽，滚动条“跳动”，体验极差。而 white-space: nowrap 必须加在 <th> 和 <td> 上，不是加在外层容器或 <table> 上——否则单元格内文字换行，高度突变，列宽计算就全乱了。
- 列宽控制优先用
<colgroup>：<col width="120"><col width="200">，语义清晰且跨浏览器兼容性好 - 避免仅靠
<th>的width属性，某些浏览器中可能不生效 - 图片统一加
max-width: 100%，防止突破列宽
iOS Safari 滚动卡顿？-webkit-overflow-scrolling: touch 不是可选，是刚需
没有它，用户拖拽后松手，表格常回弹、无惯性、响应迟钝。这不是“锦上添花”，而是 iOS 上横向滚动能否跟手的分水岭。但它只在特定条件下生效：
立即学习“前端免费学习笔记（深入）”；
- 必须加在外层
<div class="table-wrapper">上，不能加在<table>或更高层 - 容器不能有
transform、will-change、filter等触发合成层的属性，否则滚动事件可能被拦截 - 检查父元素是否用了
overscroll-behavior: contain，它会阻止滚动传递，需移除 - 若容器是 flex 子项，务必加
min-width: 0，否则滚动区会被“锁死”
真机测试前必须确认的四件事
Chrome DevTools 模拟器看不出问题，但 iOS Safari 和部分安卓 WebView 会暴露真实缺陷。上线前必须实测：
- 用
getComputedStyle(document.body).width和window.innerWidth对比，差值 > 1px 就说明有隐藏撑开源 - 临时加
outline: 1px solid red到body和它的直接子元素，快速定位越界元素（常见嫌疑：未设max-width: 100%的<img>、input[type="number"]内边距、伪元素偏移） - 检查
.table-wrapper的父元素 computed styles，重点看是否有overflow: hidden、flex-shrink: 0缺失、或width被意外压缩 - 在 iPhone SE（375px 宽）真机上拖拽测试，观察是否回弹、是否滑不动、是否松手即跳回原位
最易被忽略的是：全局根层溢出往往来自 html 而非 body，所以防溢出底线配置必须写在 html 上——html { overflow-x: hidden; }，而不是 body。
