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