如何用css sticky控制表头固定-css教程-PHP中文网

如何用css sticky控制表头固定

P粉602998670

发布： 2025-09-27 13:41:01

原创

892人浏览过

使用 position: sticky 可固定表格表头，需确保表头在 thead 中，th 设置 top: 0、背景色和 z-index，且父容器无 overflow 限制，兼容现代浏览器。

如何用css sticky控制表头固定

要让表格的表头在页面滚动时固定在顶部，可以使用 CSS 的 position: sticky 属性。这种方法简单高效，不需要 JavaScript，适用于大多数现代浏览器。

1. 基本原理：什么是 position: sticky？

position: sticky 是一种相对定位和固定定位的结合体。元素在正常文档流中，直到达到设定的偏移位置（如 top: 0），就会“粘”在视窗的某个位置，像 fixed 一样固定住。

2. 实现表头固定的 HTML 结构

确保你的表格有明确的 <thead> 和 <tbody> 结构：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <!-- 更多行数据 -->
  </tbody>
</table>

登录后复制

3. 关键 CSS 样式设置

给 <th> 或 <thead tr> 添加 sticky 定位：

DeepBrain

AI视频生成工具，ChatGPT +生成式视频AI =你可以制作伟大的视频!

108

查看详情

立即学习“前端免费学习笔记（深入）”；

table {
  width: 100%;
  border-collapse: collapse;
}
<p>thead th {
position: sticky;
top: 0;
background-color: #fff;
z-index: 10;
border-bottom: 2px solid #333;
}</p>

登录后复制

说明：