使用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 th {
background-color: #f5f5f5;
position: sticky;
top: 0; / 滚动到顶部时固定 /
z-index: 10; / 确保表头在其他内容之上 /
box-shadow: 0 2px 2px rgba(0,0,0,.1); / 可选：增加视觉分隔 /
} th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
} 虽然 sticky 使用简单，但有几个关键点需要注意： 配合上述 CSS，页面滚动时表头将自动吸附在顶部。 基本上就这些。使用 position: sticky 实现表头固定简洁高效，适合大多数场景，只要注意容器结构和样式限制即可顺利生效。 或
设置 sticky，并指定其距离顶部的偏移量。
实现
步骤：为 table thead 添加 sticky 效果 有明确的父容器，且该容器允许垂直滚动或整个页面可滚动
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
注意事项与常见问题
，可分别为每行设置不同的 top 值实现层叠固定效果
完整示例代码
姓名 年龄 城市 张三 28 北京
