直接给 <table> 加 overflow-x: auto 无效，因其作为独立格式化上下文会无视自身溢出设置；必须用 <div> 包裹并设 overflow-x: auto、width: 100%、-webkit-overflow-scrolling: touch 和 white-space: nowrap，同时将 <table> 设为 display: block、min-width: max-content、table-layout: fixed。
直接给 <table> 加 overflow-x: auto 为什么无效
浏览器把 <table> 当作独立格式化上下文，它会无视自身 overflow 设置，优先按内容撑开宽度。哪怕你写了 width: 100%，一列里放张未缩放的图片或长文本，整张表就会被顶破，父容器“感知不到”溢出，滚动条根本不会出现。
<div> 包裹容器必须设哪些 CSS 属性
滚动行为由外层 <div> 控制，漏掉任意一项都可能让滚动条不出现或拖不动：
-
overflow-x: auto—— 必须，不能用scroll（iOS 下空时仍占滚动条高度） -
width: 100%或max-width: 100vw—— 必须有明确宽度约束，仅靠overflow-x: auto不够 -
-webkit-overflow-scrolling: touch—— iOS Safari 必加，否则触控拖拽卡顿或无响应 -
white-space: nowrap—— 防止<th>/<td>内文字换行干扰宽度计算 - 避免对这个
<div>设height或max-height，否则易触发双层滚动
<table> 自身要改的关键样式
表格必须脱离默认渲染流，才能响应外层容器的溢出控制：
-
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>被父级flex或grid布局压缩 → 加min-width: 0或改用display: block - 微信内置 WebView 忽略
-webkit-overflow-scrolling: touch→ 只能靠white-space: nowrap+min-width尽量减少溢出需求
复杂点不在代码行数，而在表格宽度是内容、CSS 约束、渲染机制三者博弈的结果——只要有一列失控，整个横向滚动就失效。
