使用position: sticky可实现表头随滚动固定在顶部，提升长表格可读性。1. 为thead中的tr或th设置position: sticky并指定top值（如top: 0）；2. 确保table父容器无overflow: hidden等截断sticky的样式；3. 设置z-index确保表头层级在上方；4. 注意多行表头可分别设置top实现层叠效果；5. 浏览器兼容性良好，但IE不支持需降级处理。配合简洁CSS即可实现高效固定表头效果。
在网页开发中，当表格内容较长、用户需要滚动查看数据时，固定表头（即表头随页面滚动始终显示在顶部）能极大提升可读性和用户体验。CSS 中的 position: sticky 提供了一种简单高效的方式来实现这一效果，无需 JavaScript。
基本原理：什么是 position: sticky？
position: sticky 是一种相对定位和固定定位的结合体。元素在正常文档流中表现为相对定位（relative），但当滚动到特定阈值时，会变成类似 fixed 的行为，固定在视口的某个位置。
要让表头固定，只需对 <thead> 内的 <tr> 或 <th> 设置 sticky，并指定其距离顶部的偏移量。
实现步骤：为 table thead 添加 sticky 效果
以下是具体实现方式：
立即学习“前端免费学习笔记（深入）”；
- 确保 <table> 有明确的父容器，且该容器允许垂直滚动或整个页面可滚动
- 为 <thead >tr 设置 position: sticky
- 设置 top 值（如 top: 0），表示滚动到距视口顶部 0px 时开始固定
- 确保 thead 的父级没有影响层叠上下文的属性（如 overflow: hidden 可能会截断 sticky 元素）
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
<p>thead th {
background-color: #f5f5f5;
position: sticky;
top: 0; /<em> 滚动到顶部时固定 </em>/
z-index: 10; /<em> 确保表头在其他内容之上 </em>/
box-shadow: 0 2px 2px rgba(0,0,0,.1); /<em> 可选：增加视觉分隔 </em>/
}</p><p>th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}</p>注意事项与常见问题
虽然 sticky 使用简单，但有几个关键点需要注意：
- 父容器限制：如果 table 的某个祖先元素设置了 overflow: hidden 或 overflow: auto/scroll，sticky 可能失效。需确保容器不会裁剪 sticky 元素
- z-index 层级：固定表头可能被后续内容覆盖，设置 z-index 可避免此问题
-
多行表头支持：若 包含多行
，可分别为每行设置不同的 top 值实现层叠固定效果 - 兼容性：现代浏览器均支持 sticky，IE 不支持，需考虑是否需要降级处理
完整示例代码
<table> <thead> <tr><th>姓名</th><th>年龄</th><th>城市</th></tr> </thead> <tbody> <tr><td>张三</td><td>28</td><td>北京</td></tr> <!-- 更多行... --> </tbody> </table>配合上述 CSS，页面滚动时表头将自动吸附在顶部。
基本上就这些。使用 position: sticky 实现表头固定简洁高效，适合大多数场景，只要注意容器结构和样式限制即可顺利生效。
