直接给加overflow: auto无效，因其display: table不触发bfc且浏览器忽略该属性；需用带尺寸和overflow的容器（如div）包裹表格，并通过position: sticky实现表头固定，同时注意移动端兼容性处理。
为什么直接给 <table> 加 <code>overflow: auto 没用
因为 <table> 默认是 <code>display: table，它不会触发块级格式化上下文（BFC），也不响应 overflow。浏览器会忽略对 <table> 元素本身设置的 <code>overflow: auto —— 你拖动滚动条时什么都不会发生。
真正能生效的方式，是把 <table> 套进一个有明确尺寸和 <code>overflow: auto 的容器里，比如 <div>。<ul>
<li>容器必须设 <code>width 和/或 height（否则无法触发滚动）
max-width 或固定 width 配合 overflow-x: auto 处理横向溢出overflow-y: auto
<table> 设 <code>width: 100% 后又没撑开父容器——这会导致表格收缩、滚动失效如何让长表格在固定高度内垂直滚动
常见于后台数据列表，行数多但只显示固定区域。关键不是控制表格，而是控制外层 <div> 的高度和溢出行为。<pre class="brush:php;toolbar:false;"><div style="height: 300px; overflow-y: auto; overflow-x: hidden;">
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<!-- ... many rows -->
</table>
</div></pre>
<ul>
<li>
<code>overflow-y: auto 是核心，overflow-x: hidden 防止意外横向滚动条干扰视觉
height，让它自然撑高；否则可能截断内容或破坏滚动逻辑border-collapse: collapse，确保容器内边距足够，否则顶部/底部边框可能被裁切overflow + <table> 组合支持不稳定，可加 <code>will-change: scroll-position 缓解横向滚动时表头错位怎么 fix
纯 overflow: auto 容器滚动时，<thead> 会跟着一起滚走——用户看不到列名。这不是 bug，是默认行为。真想固定表头，得拆开结构或用 JS，但 CSS 方案有限。<ul><li>最轻量做法：用 <code>position: sticky 给 <th> 或 <code><thead> 内的 <code><tr> 加固定效果，前提是父容器是滚动上下文（即带 <code>overflow 的那个 <div>）<li>示例：<code><th style="position: sticky; left: 0; background: white; z-index: 1;"> —— 注意必须设 <code>background 遮盖滚动时露出的下方内容
sticky 在 Firefox 和 Edge 中对 <thead> 直接生效较弱，建议把 <code>sticky 落在 <th> 上更可靠<li>如果列宽动态变化（如内容自动撑开），<code>sticky 可能偏移，此时需配合 min-width 控制列最小宽度
overflow: auto 在移动端的兼容性坑
安卓 WebView 和 iOS Safari 对 overflow: auto 表格容器的惯性滚动、回弹、滚动条隐藏支持不一。尤其当表格嵌套在 flex 或 grid 容器里时，容易失效。
- 务必给滚动容器加
-webkit-overflow-scrolling: touch（iOS 专用，提升滚动流畅度） - 避免在滚动容器上同时设
display: flex或display: grid—— 这会破坏overflow的触发条件 - 部分安卓浏览器（如旧版 Chrome）需要
transform: translateZ(0)强制硬件加速才能启用滚动 - 测试时重点看：手指松开后是否继续滑动（惯性）、能否拖到最右/最下、是否有“卡顿感”——这些往往暴露了布局层级或渲染问题
滚动容器的尺寸计算、表格的自动换行与 white-space 设置、以及 sticky 表头的层叠上下文，三者稍有不匹配就会导致滚动异常或视觉错乱。动手前先确认容器盒模型是否干净，比堆 CSS 属性更有效。
