直接给加overflow-x:auto无效，因其作为独立格式化上下文会忽略自身溢出设置；必须用包裹并设置overflow-x:auto、width:100%、-webkit-overflow-scrolling:touch、white-space:nowrap，且需设display:block、min-width:max-content、table-layout:fixed。
为什么直接给 <table> 加 <code>overflow-x: auto 没用
浏览器把 <table> 当作独立格式化上下文，它会无视自身 <code>overflow 设置，优先按内容撑开宽度。哪怕你写了 width: 100%，一个未设 max-width 的 <img> 或长 URL 就能把整张表顶破，父容器“感知不到”溢出，滚动条根本不会出现。
<div> 包裹容器必须设哪些 CSS 属性
<p>滚动行为由外层 <code><div> 控制，漏掉任意一项都可能让滚动条不出现或拖不动：
<ul>
<li>
<code>overflow-x: auto —— 必须，不能用 scroll（iOS 下空时仍占滚动条高度）
width: 100% 或 max-width: 100vw —— 必须有明确宽度约束，仅靠 overflow-x: auto 不够-webkit-overflow-scrolling: touch —— iOS Safari 必加，否则触控拖拽卡顿或无响应white-space: nowrap —— 防止 <th>/<code><td> 内文字换行干扰宽度计算
<p>避免对这个 <code><div> 设 <code>height 或 max-height，否则易触发双层滚动。
<table> 自身要改的关键样式
<p>表格必须脱离默认渲染流，才能响应外层容器的溢出控制：</p>
<ul>
<li>
<code>display: block —— 强制变为块级元素，这是生效前提
width: 100% —— 否则它会反向拉伸填满父容器，彻底失去“可溢出”前提min-width: max-content —— 确保表格最小宽度等于所有列内容总宽，防止滚动条被压缩消失table-layout: fixed —— 配合显式列宽（如 th, td { min-width: 120px; }），避免列宽被内容撑爆对长文本单元格加 text-overflow: ellipsis + overflow: hidden，防意外撑列。
iOS Safari 和微信 WebView 的典型失效场景
即使样式全对，以下情况仍会导致横向滚动不可用：
- 某列含未设
max-width的<img>，原始尺寸 > 屏幕宽度 → 整表被撑开 - JS 动态插入新行后没触发重排 → 手动执行
el.style.width = el.offsetWidth + 'px' - 外层
<div> 被父级 <code>flex或grid布局压缩 → 加min-width: 0或改用display: block - 微信内置 WebView 忽略
-webkit-overflow-scrolling: touch→ 只能靠white-space: nowrap+min-width尽量减少溢出需求
复杂点不在代码行数，而在表格宽度是内容、CSS 约束、渲染机制三者博弈的结果——只要有一列失控，整个横向滚动就失效。
