直接给<table>加overflow-x:auto无效，因其默认display:table且属独立格式化上下文，不响应overflow；必须用<div>包裹并设width:100%、min-width:fit-content、overflow-x:auto及-webkit-overflow-scrolling:touch，同时<table>需设table-layout:fixed和white-space:nowrap。
overflow-x: auto 加在 <table> 上完全无效——浏览器根本不认，滚动条压根不会出现，真机上拖不动、回弹、卡顿全是它惹的祸。
为什么直接给 <table> 加 overflow-x: auto 没用
表格元素默认是 display: table，属于独立格式化上下文，规范明确不响应 overflow 属性。你加了也不会报错，但实际行为是：内容照常撑宽整个页面，父容器感知不到“溢出”，自然不触发滚动。
- 错误写法：
<table style="overflow-x: auto">—— 白写 - 真正起作用的必须是块级容器（比如
<div>），且需同时满足宽度约束、内容不被压缩、iOS 触控支持三个硬条件 - Chrome DevTools 模拟器可能“看起来像有滚动”，但 iOS Safari 和部分安卓 WebView 会暴露真实失效
<div class="table-wrapper"> 必须设哪些样式
外层包裹容器不是加个 overflow-x: auto 就完事，漏掉任意一项都可能导致滚动条不出现或拖不动。
-
width: 100%或max-width: 100%：确保容器不脱离文档流，为横向滚动提供基准宽度 -
overflow-x: auto+overflow-y: hidden：避免意外纵滚干扰；别用scroll，空时也占滚动条高度 -
min-width: fit-content：关键开关！表格默认会压缩列宽来适应窄屏，导致文字挤成一团、换行错乱；fit-content告诉浏览器“按内容原始宽度撑开，别压我” -
-webkit-overflow-scrolling: touch：iOS Safari 和微信内置浏览器刚需，缺了就拖拽迟钝、松手回弹、无惯性 - 若父容器是
display: flex，必须给该<div>加min-width: 0，否则 flex item 默认不收缩，滚动直接锁死
<table> 本身要改什么
表格脱离自然布局后，列宽容易错位或撑爆容器，必须主动约束。
立即学习“前端免费学习笔记（深入）”；
- 去掉
width: 100%：它会覆盖table-layout: fixed的列宽分配逻辑，让滚动失效 - 加
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 对这些细节极其敏感。
- 检查包裹
<div>是否加了-webkit-overflow-scrolling: touch，且没被transform、will-change或filter等属性干扰（它们会触发合成层冲突） - 确认父元素没设
overscroll-behavior: contain，它会阻止滚动事件传递 - 运行
getComputedStyle(document.body).width和window.innerWidth对比，差值 > 1px 就说明有隐藏撑开源（常见于未设max-width: 100%的<img>或<video>） - 全局底线配置不能少：
html { overflow-x: hidden; } body { margin: 0; } img, video, iframe { max-width: 100%; height: auto; }
最易被忽略的点是：min-width: fit-content 在旧版 Safari 不支持，得退为 min-width: 600px（按列数估算），而 -webkit-overflow-scrolling: touch 如果加在错的层级或被其他 CSS 干扰，iOS 上就只是“看起来能滑”，实则跟手性极差。
