表格外层容器需设固定高度并加overflow-y:auto，因table自身不响应overflow；表头固定须用position:sticky+top:0+背景色，且th与td列宽需一致。
给表格外层容器设固定高度 + overflow-y: auto
直接对 <table> 加 <code>overflow-y: auto 无效——表格是独立格式化上下文，不会响应自身溢出设置。必须用一个块级容器包裹它，并控制那个容器的滚动行为。
关键点：不是“让表格滚动”，而是“让装表格的盒子滚动”。
- 外层
<div class="table-scroller"> 必须设明确 <code>height（如400px）或max-height，不能只靠min-height或内容撑开 - 该
<div> 要加 <code>overflow-y: auto和overflow-x: hidden（防意外横滚） <table> 本身不设 <code>height，也不用display: block（这会破坏表头/表体对齐）- 如果用了
border-collapse: collapse，滚动时表头边框可能抖动，建议改用border-collapse: separate+ 显式border <thead> 或每个 <code><th> 都要加 <code>position: sticky; top: 0;- 必须加
background-color（深色优先，比如#101a2c），否则滚动时底下内容会透上来 <th> 和对应列的 <code><td> 要有相同 <code>width或min-width，否则滚动后列会错位- 不要在
<th> 上用 <code>flex或absolute布局，它们会干扰 sticky 定位计算隐藏原生滚动条但保留功能
滚动条占空间、风格不统一，又不能直接删掉——删了就滚不动了。得用 CSS 隐藏视觉部分，保留交互能力。
- Chrome / Edge：给外层容器加
::-webkit-scrollbar { display: none; } - Firefox：加
scrollbar-width: none; - 不要用
overflow: hidden代替，那会彻底禁用滚动 - 移动端 iOS Safari 需额外加
-webkit-overflow-scrolling: touch，否则拖拽松手即回弹
滚动区域过深时 touchmove 延迟导致卡顿
DOM 层级超过 6 层（比如
body > #app > .page > .content > .table-wrapper > .scroller），低端安卓机上touchmove可能延迟 40ms+，造成“滚动跟手性差”“偶尔穿透”。- 检查 DevTools 的 Elements 面板，把不必要的包装层（如空
<div>）合并或删掉 <li>避免在滚动容器内嵌套多个 <code>transform或will-change，它们会触发额外图层合成 - 如果用了 Vue/React，确认
.table-scroller不是组件根节点的直系子元素；否则框架的 diff 更新可能放大延迟 - 真遇到卡顿，可降级为监听
scroll事件 +requestAnimationFrame节流，而不是依赖 touchmove 实时响应
- Chrome / Edge：给外层容器加
固定表头要用 position: sticky，且必须配 background
滚动时表头消失、错位、透底，基本都是 position: sticky 没配对或背景没盖住。
常见错误是只写了 top: 0，但没处理滚动穿透导致的背景暴露。
