HTML表格表头固定不能只靠<thead>，因其仅为语义标签，无默认滚动固定能力；需配合position: sticky、top: 0、父容器max-height和overflow-y: auto等CSS才能实现。
HTML表格表头固定为什么不能只靠 <thead>
<thead> 本身只是语义化标签，告诉浏览器“这部分是表头”，但**默认完全不带滚动固定能力**。很多人写完 <thead> 发现一滚动就跟着跑，是因为没配 CSS 或用了错误的定位方式。
真正起作用的是 position: sticky + 正确的 top 值，且必须确保父容器有明确高度和 overflow-y: auto。
- 只加
<thead><tr><th>...不加样式 → 表头随内容一起滚动 - 对
<thead>直接设position: fixed→ 脱离文档流，宽度错乱、无法对齐列 - 忘记给
<tbody>设置display: block（某些老方案）→ 现代推荐用sticky，无需改 display
用 position: sticky 固定表头的最小可行代码
这是目前兼容性好（Chrome 51+、Firefox 59+、Safari 6.1+）、无需 JS、不破坏表格语义的主流做法：
<table style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="position: sticky; top: 0; background: #f8f9fa; z-index: 10;">姓名</th>
<th style="position: sticky; top: 0; background: #f8f9fa; z-index: 10;">年龄</th>
<th style="position: sticky; top: 0; background: #f8f9fa; z-index: 10;">城市</th>
</tr>
</thead>
<tbody style="max-height: 300px; overflow-y: auto; display: block;">
<tr><td>张三</td><td>28</td><td>北京</td></tr>
<tr><td>李四</td><td>32</td><td>上海</td></tr>
<!-- 更多行... -->
</tbody>
</table>关键点：
立即学习“前端免费学习笔记（深入）”；
-
top: 0是相对于最近的「有滚动边界」的祖先元素生效，所以<tbody>必须设max-height+overflow-y: auto -
z-index必须设（哪怕只是 1），否则被后面内容盖住 -
background必须显式设置，不然滚动时底色透出难看 - 如果表格有
border，<th>的border-bottom会断开 → 建议统一用border-collapse: collapse+ 给<th>加border-bottom
IE11 及以下不支持 sticky 怎么办
IE 完全不认 position: sticky，这时有两个务实选择：
- 降级为「表头始终可见 + 内容区独立滚动」：把
<thead>提到表格外，用两个分离的<table>（一个只放表头，一个只放数据），手动同步列宽（通过 JS 监听resize和scroll，或用table-layout: fixed+ 预设width） - 引入轻量 JS 库如
sticky-table-headers（仅 2KB），它会在 IE 下 fallback 到position: absolute模拟，但需注意列宽同步逻辑是否健壮 - 直接放弃 IE 支持（很多企业项目已明确不保）→ 在 CSS 中加
@supports not (position: sticky) { ... }做提示或隐藏功能
纯 CSS 无 JS 的 IE 兼容方案基本不存在，硬要写会陷入列宽漂移、滚动卡顿、表头错位等连锁问题。
面试时被问「固定表头性能怎么优化」该答什么
高频陷阱是只答「用 will-change: transform」，其实更关键的是避免重排重绘链：
- 表头单元格不要用
flex或grid布局 → 容易触发 layout thrashing - 禁止在
<th>上监听mouseenter并动态改样式 → 滚动时频繁触发 - 列数很多（比如 >20）时，
sticky本身开销不大，但<tbody>渲染大量<tr>才是瓶颈 → 要提虚拟滚动（virtualized table），而不是死磕表头 - 移动端 Safari 对
sticky在<table>内支持不稳定 → 可改用position: -webkit-sticky并测试 iOS 14.5+
真正容易被忽略的点是：固定表头后，<tbody> 的 scrollHeight 仍包含全部行，但可视区域只显示部分——这意味着用 scrollTop 计算当前页码或懒加载时机，必须基于容器高度而非整个 tbody 高度。
