以下是具体实现方式：

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

  table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
  }
  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 使用简单，但有几个关键点需要注意：

  • 父容器限制：如果 table 的某个祖先元素设置了 overflow: hidden 或 overflow: auto/scroll，sticky 可能失效。需确保容器不会裁剪 sticky 元素
  • z-index 层级：固定表头可能被后续内容覆盖，设置 z-index 可避免此问题
  • 多行表头支持：若
  包含多行 ，可分别为每行设置不同的 top 值实现层叠固定效果
  兼容性：现代浏览器均支持 sticky，IE 不支持，需考虑是否需要降级处理

  完整示例代码

  姓名	年龄	城市
  张三	28	北京

  配合上述 CSS，页面滚动时表头将自动吸附在顶部。

  基本上就这些。使用 position: sticky 实现表头固定简洁高效，适合大多数场景，只要注意容器结构和样式限制即可顺利生效。