直接给<table>加overflow-x:auto无效，因其属独立格式化上下文，无视自身overflow并优先按内容撑宽；必须用设width:100%、overflow-x:auto、white-space:nowrap、-webkit-overflow-scrolling:touch且display:block的<div>包裹，并将<table>设为display:block、min-width:max-content、移除width:100%。
为什么直接给 <table> 加 overflow-x: auto 没用
浏览器把 <table> 当作独立格式化上下文，它会无视自身 overflow 设置，优先按内容撑开宽度。哪怕你写了 width: 100%，一列里塞个长 URL 或未缩放的图片，整张表就顶破容器，父级根本“感知不到”溢出——滚动条压根不会出现。
<div> 容器必须设哪些样式才生效
滚动行为由外层 <div> 控制，漏掉任意一项都可能让滚动条不出现、拖不动，或 iOS 上卡顿：
-
overflow-x: auto——必须；别用scroll（空时也占滚动条高度） -
width: 100%或max-width: 100vw——必须有明确宽度约束，仅靠overflow-x不够 -
white-space: nowrap——防止<th>/<td>内文字换行，干扰宽度计算 -
display: block——避免被父级 flex/grid 布局压缩（常见于 Bootstrap/Tailwind） -
-webkit-overflow-scrolling: touch——iOS Safari 必加，否则触控拖拽松手即回弹
<table> 自身要改的关键样式
表格必须脱离默认渲染流，否则列宽错位、表头对不齐、滚动后内容“飞走”：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
-
display: block——强制变为块级元素，这是生效前提 -
min-width: max-content——确保表格最小宽度等于所有列内容总宽（Safari 14.1+/Chrome 107+ 支持；旧版可退为min-width: 600px） - 删掉
width: 100%——否则它会反向拉伸填满父容器，彻底失去“可溢出”前提 - 给每列
<th>和对应<td>设相同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 布局压缩 → 加min-width: 0或改用display: block - 微信内置 WebView 忽略
-webkit-overflow-scrolling: touch→ 只能靠white-space: nowrap+min-width尽量减少溢出需求
真正卡点不在代码行数，而在表格宽度是内容、CSS 约束、渲染机制三者博弈的结果——只要有一列失控，整个横向滚动就失效。
