直接用position: sticky实现表头固定需同时满足三个条件：th设top: 0、z-index≥1及显式background-color；tbody设max-height和overflow-y: auto创建滚动上下文；table不能有transform/filter等阻断属性。
直接用 position: sticky 就能实现，但必须配对设置 top: 0、z-index 和父容器的滚动上下文，否则表头照样会滚走。
为什么 <thead> 单独写没用
<p><code><thead> 只是语义标签，不带任何定位行为。浏览器不会因为它存在就自动冻结它——这和 <code><header></header> 不会自动吸顶是一个道理。
- 只写
<thead><tr><th>姓名</th></tr></thead> → 滚动时整块跟着跑
- 给
<thead> 加 <code>position: fixed → 脱离文档流，列宽错乱、无法对齐 <tbody> 的单元格
<li>忘了设 <code>background → 滚动时文字底下透出数据行，看不清
position: sticky 的最小可行配置
现代浏览器（Chrome 51+、Firefox 59+、Safari 6.1+）都支持，无需 JS，也不破坏表格结构。
<th> 必须单独加 <code>position: sticky; top: 0; z-index: 10;
<tbody> 必须有明确高度限制：加 <code>max-height: 300px; overflow-y: auto;
<table> 推荐加 <code>border-collapse: collapse;，避免 sticky 下边框断裂
<th> 必须显式设 <code>background（哪怕只是 #fff），否则滚动时底色不可控
示例关键片段：
姓名
年龄
张三
28
IE11 及更老浏览器怎么办
IE 完全不支持 position: sticky，降级方案不是“兼容”，而是“换结构”。
- 把
<thead> 拆出来，放在表格外面，变成一个独立的 <code><table>（只含表头）
<li>数据部分用另一个 <code><table>，包裹在 <code>div 里并设 overflow-y: auto
- 两套表格必须共用
table-layout: fixed，且每列 width 值完全一致（比如都设 width: 20%）
- 如果列宽由内容撑开，就得用 JS 监听
resize 和 scroll，动态读取第一行 <td> 宽度再赋给对应 <code><th>
<h3>容易被忽略的列宽错位问题</h3>
<p>只要用了 <code>display: block 或拆分表格，列宽就极易错位——这不是 bug，是 CSS 表格渲染模型切换后的必然结果。
- 禁用
table-layout: auto（默认值），强制用 table-layout: fixed
- 所有列宽必须通过
<col> 标签或首行 <th> 的 <code>width 属性声明，不能靠内容撑开
- 如果用了
position: sticky 但列还是错位，大概率是父容器有 overflow: hidden 把 sticky 区域裁掉了
真正麻烦的从来不是“怎么让表头不动”，而是“怎么让它不动的同时还对得齐”。
<thead><tr><th>姓名</th></tr></thead> → 滚动时整块跟着跑<thead> 加 <code>position: fixed → 脱离文档流，列宽错乱、无法对齐 <tbody> 的单元格
<li>忘了设 <code>background → 滚动时文字底下透出数据行，看不清
position: sticky 的最小可行配置
现代浏览器（Chrome 51+、Firefox 59+、Safari 6.1+）都支持，无需 JS，也不破坏表格结构。
<th> 必须单独加 <code>position: sticky; top: 0; z-index: 10;<tbody> 必须有明确高度限制：加 <code>max-height: 300px; overflow-y: auto;<table> 推荐加 <code>border-collapse: collapse;，避免sticky下边框断裂<th> 必须显式设 <code>background（哪怕只是#fff），否则滚动时底色不可控示例关键片段：
姓名 年龄 张三 28 IE11 及更老浏览器怎么办
IE 完全不支持
position: sticky，降级方案不是“兼容”，而是“换结构”。- 把
<thead> 拆出来，放在表格外面，变成一个独立的 <code><table>（只含表头） <li>数据部分用另一个 <code><table>，包裹在 <code>div里并设overflow-y: auto - 两套表格必须共用
table-layout: fixed，且每列width值完全一致（比如都设width: 20%） - 如果列宽由内容撑开，就得用 JS 监听
resize和scroll，动态读取第一行<td> 宽度再赋给对应 <code><th> <h3>容易被忽略的列宽错位问题</h3> <p>只要用了 <code>display: block或拆分表格，列宽就极易错位——这不是 bug，是 CSS 表格渲染模型切换后的必然结果。- 禁用
table-layout: auto（默认值），强制用table-layout: fixed - 所有列宽必须通过
<col>标签或首行<th> 的 <code>width属性声明，不能靠内容撑开 - 如果用了
position: sticky但列还是错位，大概率是父容器有overflow: hidden把 sticky 区域裁掉了
真正麻烦的从来不是“怎么让表头不动”，而是“怎么让它不动的同时还对得齐”。
- 禁用
- 把
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
