直接给<table>加overflow-x:auto无效，因表格是独立格式化上下文，无视自身overflow设置，优先按内容撑宽；必须用设width:100%、overflow-x:auto、white-space:nowrap、-webkit-overflow-scrolling:touch的<div>包裹，并让<table>设display:block、min-width:max-content、删掉width:100%及统一列min-width。
为什么直接给 <table> 加 overflow-x: auto 没用
浏览器把 <table> 当作独立格式化上下文，它会无视自身 overflow 设置，优先按内容撑开宽度。哪怕你写了 width: 100%，也会被内部单元格最小自然宽（比如一长串 URL 或中文不换行文本）顶破，父容器根本“感知不到”溢出，滚动条压根不会出现。
错误写法：<table style="overflow-x: auto"> —— 完全不生效。
<div> 容器必须设哪些样式
滚动必须由外层 <div> 控制，漏掉任意一项都可能导致滚动条不显示、拖不动或 iOS 上划不动。
-
overflow-x: auto—— 必须，且别用scroll（否则空时也占滚动条高度） -
width或max-width—— 必须设具体值，width: 100%可行，fit-content不可靠 -
white-space: nowrap—— 防止<th>/<td>内文字换行干扰总宽度计算 -
display: block—— 避免被父级 flex 布局压缩（尤其在 Bootstrap 或 Tailwind 中常见） -
overflow-y: hidden—— 防止意外纵向滚动干扰体验
<table> 本身要加什么关键样式
让表格响应外部滚动控制，核心是切断它的默认表格渲染流。
立即学习“前端免费学习笔记（深入）”；
-
display: block—— 否则浏览器仍按表格布局算法算宽，无视父容器约束 -
min-width: max-content—— 确保表格最小宽度等于所有列内容总宽，避免滚动条被“压缩掉” - 删掉
width: 100%—— 这会让表格反向拉伸填满父容器，彻底失去溢出前提 - 为每列
<th>和对应<td>设相同min-width（如min-width: 120px），否则display: block后列宽错位
iOS Safari 滚动卡顿或划不动怎么办
这不是 bug，是 WebKit 渲染策略：默认禁用横向 touch 惯性滚动，只响应鼠标滚轮。
- 必须给外层
<div>加-webkit-overflow-scrolling: touch（iOS 15+ 虽已弃用，但不加仍大概率失效） - 加
touch-action: pan-x—— 否则 Safari 默认锁定pan-y，手指横向滑会被拦截 - 别在滚动容器上监听
touchstart或调event.preventDefault()—— 这会直接禁用原生滚动 - 如果用了
position: sticky表头，确保<thead>不被设为display: block，否则 sticky 失效
display: block + min-width: max-content + 显式列宽控制，这三者缺一不可；iOS 上 touch-action: pan-x 和 -webkit-overflow-scrolling: touch 也得同时存在，少一个就可能划不动。 
