overflow-y 在 table 元素上无效，因其属于表格格式化上下文；正确做法是用固定高度的 div 包裹 tbody 并设置 overflow-y: auto，同时确保 thead 与滚动容器同级以实现表头固定。
overflow-y 在 table 元素上根本不起作用
直接给 <table> 设置 <code>overflow-y: auto 或 overflow-y: scroll 是无效的。这是浏览器规范决定的：HTML 表格是“table formatting context”，overflow 属性对 <table>、<code><tbody>、<code><tr> 等原生表格元素默认被忽略（除非显式设为 <code>display: block，但会破坏表格布局语义和样式）。
正确做法：用 div 包裹 tbody 实现垂直滚动
核心思路是把可滚动区域从表格内部“抽出来”——用一个固定高度的 <div> 包住 <code><tbody>，并对该 <code><div> 应用 <code>overflow-y：
| Name | Age |
|---|---|
| Alice | 28 |
| Bob | 32 |
然后用 CSS 控制包裹容器：
- 给
<tbody> 外层加一个 <code><div class="tbody-wrapper"> <li>设置 <code>.tbody-wrapper { display: block; max-height: 200px; overflow-y: auto; } - 关键：重置
<tbody> 的 display 为 <code>table-row-group（否则会被当普通块级元素撑开） - 为避免滚动条遮挡边框或内容，建议加
padding-right: 16px或用scrollbar-gutter: stable（现代浏览器支持） - IE 不支持
sticky，老项目需 fallback 到 JS 监听 scroll 或用第三方库（如fixed-header-table） - 横向滚动时，
<thead> 和 <code><tbody> 列宽不同步是常见问题——所有 <code>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 是否符合预期。</div> - 给滚动容器加
thead 固定 + tbody 滚动的兼容性要点
要让表头始终可见，必须确保 <thead> 和滚动区域分离，且不随滚动位移：<ul><li><code><thead> 必须和滚动 <code><div> 同级（不能包在它里面）<li>如果使用 <code>position: sticky 固定表头，需给 th 设置 top: 0 和 background（避免滚动时文字透底）
