如何实现Table Header固定在main-1父元素上？尝试后未成功

sticky定位没生效，大概率是滚动容器没设置对，或者表头缺了必要样式，按下面的步骤改就行：

1. 给main-1设置滚动容器属性 #

首先得让main-1成为可滚动的容器，不然sticky不知道该跟着哪个元素的滚动走：

#main-1 {
  overflow-y: auto; /* 垂直方向超出就显示滚动条 */
  height: 400px; /* 给个固定高度，超出这个高度就触发滚动，数值可按需调整 */
}

要是不想固定高度，也可以用max-height: calc(100vh - 200px)这种自适应写法，根据页面布局调整数值即可。

2. 给表头设置sticky定位并添加防穿透样式 #

光设置sticky还不够，得让表头在滚动时不被下面的内容盖住：

#main-1 th {
  position: sticky;
  top: 0; /* 固定在容器顶部0距离的位置 */
  background: #fff; /* 跟表格背景色保持一致，避免滚动时下方内容透出 */
  z-index: 1; /* 确保表头层级高于表格内容 */
}

3. 排查冲突样式 #

检查main-1的父元素是否设置了overflow: hidden、transform或perspective属性，这些属性会破坏sticky的定位上下文，存在的话需要移除或调整。

完整示例代码 #

HTML结构（保留原有结构即可） #

<div id="main-1">
  <table>
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody>
      <!-- 多行测试内容 -->
      <tr><td>内容1</td><td>内容2</td><td>内容3</td></tr>
      <tr><td>内容1</td><td>内容2</td><td>内容3</td></tr>
      <!-- 更多行... -->
    </tbody>
  </table>
</div>

CSS样式 #

#main-1 {
  overflow-y: auto;
  height: 400px;
  border: 1px solid #eee;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  border: 1px solid #eee;
  text-align: left;
}

#main-1 th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  font-weight: bold;
}

内容的提问来源于stack exchange，提问作者jokey