overflow-y 在 table 元素上无效，因其属于表格格式化上下文；正确做法是用固定高度的 div 包裹 tbody 并设置 overflow-y: auto，同时确保 thead 与滚动容器同级以实现表头固定。
overflow-y 在 table 元素上根本不起作用
直接给 <table> 设置 overflow-y: auto 或 overflow-y: scroll 是无效的。这是浏览器规范决定的：HTML 表格是“table formatting context”，overflow 属性对 <table>、<tbody>、<tr> 等原生表格元素默认被忽略（除非显式设为 display: block，但会破坏表格布局语义和样式）。
正确做法：用 div 包裹 tbody 实现垂直滚动
核心思路是把可滚动区域从表格内部“抽出来”——用一个固定高度的 <div> 包住 <tbody>，并对该 <div> 应用 overflow-y：
<table>
<thead>
<tr><th>Name</th><th>Age</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>28</td></tr>
<tr><td>Bob</td><td>32</td></tr>
<!-- 更多行... -->
</tbody>
</table>然后用 CSS 控制包裹容器：
- 给
<tbody>外层加一个<div class="tbody-wrapper"> - 设置
.tbody-wrapper { display: block; max-height: 200px; overflow-y: auto; } - 关键：重置
<tbody>的 display 为table-row-group（否则会被当普通块级元素撑开） - 为避免滚动条遮挡边框或内容，建议加
padding-right: 16px或用scrollbar-gutter: stable（现代浏览器支持）
thead 固定 + tbody 滚动的兼容性要点
要让表头始终可见，必须确保 <thead> 和滚动区域分离，且不随滚动位移：
立即学习“前端免费学习笔记（深入）”；
-
<thead>必须和滚动<div>同级（不能包在它里面） - 如果使用
position: sticky固定表头，需给th设置top: 0和background（避免滚动时文字透底） - IE 不支持
sticky，老项目需 fallback 到 JS 监听 scroll 或用第三方库（如fixed-header-table） - 横向滚动时，
<thead>和<tbody>列宽不同步是常见问题——所有th和td必须显式设置相同width或用table-layout: fixed
移动端 touch 滚动卡顿怎么办
在 iOS Safari 或部分安卓 WebView 中，纯 CSS 滚动可能响应迟滞或无法滑动：
- 给滚动容器加
-webkit-overflow-scrolling: touch（仅 iOS 有效，已逐步废弃但仍有用） - 避免在滚动区域内放大量 inline SVG 或未优化图片
- 若仍卡顿，考虑用
transform: translateZ(0)或will-change: scroll-position触发硬件加速（慎用，可能增加内存占用） - 更稳妥方案：改用虚拟滚动（如
react-window或vue-virtual-scroller），尤其当行数 > 100
滚动区域的边界和尺寸计算容易受 box-sizing、border、padding 干扰，调试时优先检查包裹 <div> 的实际 height 和 content-box 是否符合预期。
