横向滚动必须由外层容器实现，不能直接作用于table；需满足四前提：外层设width/max-width、white-space: nowrap、display: flex+flex-wrap: nowrap、移动端加-webkit-overflow-scrolling: touch。
横向滚动不是“加个 overflow-x: auto 就完事”的功能，90% 的响应式模板失效，是因为把滚动逻辑错误地施加在了 <table> 或内容元素本身上——真正起作用的必须是外层容器，且它得满足四个硬性前提。
<h3>为什么 <code><table> 上直接写 <code>overflow-x: auto 完全无效
浏览器把 <table> 当作独立格式化上下文，它会无视自身 <code>overflow 设置，优先按单元格内容撑开宽度。即使父级写了 width: 100%，长文本、图片或未约束的 min-width 也会顶破限制，导致外层根本“感知不到”溢出。
- 错误写法：
<table style="overflow-x: auto"> —— 滚动条永远不会出现 <li>正确结构：必须用 <code><div class="table-responsive"><table></table></div> - 外层
<div> 必须设 <code>width或max-width（fit-content不可靠） - 同时加
white-space: nowrap，否则内部换行会干扰总宽度计算 - 漏掉
flex-wrap: nowrap：多子项时自动折成多行，宽度压不上去 - 子项用了
flex: 1或width: 100%：强制拉伸填满，失去“超宽”前提 - 子项是图片或带文本的卡片，但没设
min-width: 0：文本溢出会撑爆父容器 - 移动端缺
-webkit-overflow-scrolling: touch：iOS Safari 拖不动、无惯性 - 禁用
table-layout: fixed配合百分比宽度——小屏下会把长文本压成一串省略号 - 固定表头只能加在
<th> 上（不能加在 <code><thead>），且需配 <code>top: 0和足够z-index - 如果列内容长度差异大，
white-space: nowrap+text-overflow: ellipsis比硬撑更稳 - 外层容器必须加
-webkit-overflow-scrolling: touch（iOS 15+ 已标记弃用，但实测仍需保留） - 避免在
<td> 或 <code><th> 内用 <code>display: flex或position: absolute—— 干扰滚动区域检测 - 滚动条样式要统一：Chrome/Safari 用
::-webkit-scrollbar { width: 0 }，Firefox 用scrollbar-width: none - 别用
margin-right隔开子项——会导致scroll-snap-align错位；改用gap: 12px
display: flex 容器里横向滚动失效的常见原因
Flex 布局下 overflow-x: auto 容易被“静默吞掉”，不是 CSS 写错了，而是默认行为在暗中干预。
表格列宽错位、滚动后表头对不齐怎么办
一旦给 <table> 加了 <code>display: block，<thead> 和 <code><tbody> 就脱钩了，列宽不再自动同步。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>必须为每列的 <code><th> 和对应 <code><td> 设相同 <code>min-width（如 min-width: 120px），别用百分比 width
移动端滚动卡顿、拖不动、看不到滚动条
iOS Safari 对 overflow 容器的滚动有特殊限制，尤其当表格含大量单元格或用了 sticky 表头时，容易失灵。
最常被忽略的点是：外层容器没设明确宽度约束，或者表格仍保留 width: 100%。这两个条件不满足，其余所有样式都只是摆设。
