因为table默认处于表格格式化上下文，不支持块级溢出控制，浏览器会忽略其overflow和height属性；必须用div包裹并设max-height、overflow-y:auto、width:100%及overflow-x:hidden。
为什么直接给 <table> 加 overflow 没用
浏览器会忽略 <table>、<tbody> 上的 overflow 和 height，因为表格元素默认处于“表格格式化上下文”，不支持块级溢出控制。你写 tbody { height: 300px; overflow-y: auto; }，computed styles 里 overflow 依然显示为 visible——不是你写错了，是它根本无效。
必须用 <div> 包裹并设 max-height
正确做法是把 <table> 放进一个 <div class="table-wrapper">，然后只对这个 <div> 设置尺寸和溢出行为：
-
max-height比height更安全：内容少时不留白，内容多时才滚动 - 必须同时设
overflow-y: auto（垂直）或overflow: auto（双向） - 加
overflow-x: hidden防止长文本或未换行单元格意外触发横向滚动 - 别忘了给
.table-wrapper设宽度（如width: 100%），否则max-height可能不生效
示例 CSS：
.table-wrapper {
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
width: 100%;
}
表头固定要单独处理，position: sticky 最简
滚动时想让 <thead> 始终可见，不能靠 JS 或拆分 DOM。现代方案就是给 th 加 position: sticky：
立即学习“前端免费学习笔记（深入）”；
-
top: 0是必须的，否则不粘住 -
background要显式设（如#fff），不然滚动时文字可能和下面内容重叠 -
z-index推荐设为10以上，避免被其他元素遮挡 - 注意：Safari 14.1+、Chrome 56+、Firefox 59+ 支持良好；IE 完全不支持，需降级处理
CSS 示例：
.table-wrapper thead th {
position: sticky;
top: 0;
background: #fff;
z-index: 10;
}
Flex 布局里 overflow-y: auto 失效怎么办
如果 .table-wrapper 是某个 display: flex 容器的子项，它很可能被拉伸填满高度，导致“永远不溢出”。此时 overflow-y: auto 彻底静默：
- 给
.table-wrapper加flex: 0 1 auto（等价于flex-grow: 0; flex-shrink: 1; flex-basis: auto） - 或者加
min-height: 0，强制允许收缩 - 绝对不要只设
flex-shrink: 0，那会让它拒绝压缩，反而撑开父容器 - 检查父级是否用了
align-items: stretch（默认值），它也会干扰高度约束
真正卡住的地方，往往不在那一行 overflow 上，而在它上面三四层的布局逻辑里。逐层 inspect 元素的 computed height 和 max-height 才能定位问题。
