表格横向滚动失效的根本原因是table自动撑宽，需用table-container设overflow-x:auto和width:100%，table设min-width:max-content；禁用display:table布局；ios需加-webkit-overflow-scrolling:touch且避免transform等干扰属性。
表格内容溢出时横向滚动不生效
常见现象是给 table 直接加 overflow-x: auto 没反应，或者滚动条出现但拖不动。根本原因是 table 默认为「自动撑宽」元素，父容器无法约束其宽度，overflow 就失效了。
必须切断表格的自动伸展行为：
- 给表格父容器（比如
<div>）设 <code>overflow-x: auto和width: 100% - 给
table自身加display: block或min-width: max-content（后者更稳妥，保留语义） - 避免给
table设width: 100%—— 这会让列被强制压缩，破坏可读性 - 用普通
<div class="table-container"> 包裹 <code><table> <li>容器不设 <code>display: table，只设overflow-x: auto、width: 100%、-webkit-overflow-scrolling: touch（iOS 滚动顺滑） - 表格本身保留
display: table（默认值），不覆盖
CSS写法要避开 display: table 的陷阱
有些框架或手写样式里，会把容器设成 display: table，再套个 display: table-cell 放表格。这种布局下，overflow 几乎必然失效，因为 table 渲染模型不支持子元素溢出裁剪。
正确做法是保持语义结构干净：
示例关键 CSS：
.table-container {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-container > table {
min-width: max-content;
}
移动端触摸滚动卡顿或无法拖动
iOS Safari 和部分安卓浏览器对 overflow 容器内的 touch 事件处理较保守，默认禁用非 body 元素的惯性滚动。单纯加 overflow-x: auto 不够。
必须补全两个条件：
-
-webkit-overflow-scrolling: touch（仅 WebKit 内核有效，iOS 必加） - 容器不能有
transform、opacity 、<code>will-change等触发合成层的属性——它们会干扰滚动上下文 - 确保容器没有
height限制（除非你明确要截断），否则可能触发双滚动条
固定表头 + 横向滚动的兼容性雷区
想让 <thead> 固定、<code><tbody> 可横向滚动？别用 <code>position: sticky 套在 th 上再加外层 overflow —— 多数安卓浏览器不支持 sticky + overflow 组合。
可行路径只有一条：分离表头与主体，用两个独立 table 并手动对齐列宽：
- 用 JS 读取
thead th的offsetWidth，同步设给tbody td的min-width - 或者用
table-layout: fixed+ 显式width百分比控制列宽（但需预知列数） - 放弃纯 CSS 方案，小屏下直接改用卡片列表（
flex垂直堆叠）更可靠
复杂点不在滚动本身，而在「滚动时表头是否还对得上列」——这个对齐一旦错位，用户立刻失去数据关联感，比没滚动还糟。
