以下是具体实现方式：

• 确保 有明确的父容器，且该容器允许垂直滚动或整个页面可滚动
  为
  tr 设置 position: sticky
  设置 top 值（如 top: 0），表示滚动到距视口顶部 0px 时开始固定
  确保 thead 的父级没有影响层叠上下文的属性（如 overflow: hidden 可能会截断 sticky 元素）
  来画数字人|直播|

  来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

  57 查看详情

  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 实现表头固定简洁高效，适合大多数场景，只要注意容器结构和样式限制即可顺利生效。