求助：如何用CSS实现HTML表格2表头行与3列的冻结效果？

核心问题分析 #

1. 表头行未冻结：你给所有<th>设置了top:0，但两个表头行需要不同的top偏移值，否则会重叠在一起，导致视觉上只有一行生效。
2. 左侧列重叠：硬编码的left值与实际列宽不匹配，且重复的CSS规则（比如两次设置th:nth-child(2)的left）导致样式冲突，同时z-index层级设置不合理，引发覆盖问题。

修正方案 #

1. 基础布局准备

确保表格放在带滚动的容器内，同时启用表格边框合并：

<div class="table-container">
  <table>
    <thead>
      <!-- 第一个表头行 -->
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
        <th>列4</th>
        <!-- 更多列... -->
      </tr>
      <!-- 第二个表头行 -->
      <tr>
        <th>子列1</th>
        <th>子列2</th>
        <th>子列3</th>
        <th>子列4</th>
        <!-- 更多子列... -->
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容行 -->
    </tbody>
  </table>
</div>

.table-container {
  width: 100%;
  height: 400px; /* 自定义容器高度 */
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse; /* 必须启用，否则sticky边框会错位 */
}

2. 冻结表头行

给两个表头行分别设置不同的top偏移，同时调整z-index确保层级正确：

/* 第一个表头行 - 固定在顶部 */
thead tr:first-child th {
  position: sticky;
  top: 0;
  background-color: #133b5c;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  padding: 12px 10px;
  border-bottom: 2px solid #0f2c48;
  z-index: 4; /* 层级高于第二个表头行 */
}

/* 第二个表头行 - 固定在第一个表头行下方 */
thead tr:nth-child(2) th {
  position: sticky;
  top: 56px; /* 等于第一个表头行的高度（padding+font-size等），根据实际调整 */
  background-color: #133b5c;
  color: white;
  text-align: center;
  font-weight: bold;
  padding: 10px;
  border-bottom: 2px solid #0f2c48;
  z-index: 3;
}

3. 冻结左侧3列

给每一列设置固定宽度，按宽度累加设置left值，同时调整z-index避免覆盖：

/* 第一列 - 左侧固定 */
table th:nth-child(1),
table td:nth-child(1) {
  position: sticky;
  left: 0;
  width: 150px; /* 固定宽度 */
  background-color: #ffebb5;
  color: #333;
  font-weight: bold;
  border-right: 2px solid #bbb;
  z-index: 2; /* 内容列层级 */
}

/* 第二列 - 紧跟第一列右侧 */
table th:nth-child(2),
table td:nth-child(2) {
  position: sticky;
  left: 150px; /* 等于第一列宽度 */
  width: 150px;
  background-color: #ffebb5;
  color: #333;
  font-weight: bold;
  border-right: 2px solid #bbb;
  z-index: 2;
}

/* 第三列 - 紧跟第二列右侧 */
table th:nth-child(3),
table td:nth-child(3) {
  position: sticky;
  left: 300px; /* 第一列+第二列宽度之和 */
  width: 150px;
  background-color: #ffebb5;
  color: #333;
  font-weight: bold;
  border-right: 2px solid #bbb;
  z-index: 2;
}

/* 表头冻结列层级高于内容列，避免滚动时被覆盖 */
thead th:nth-child(1),
thead th:nth-child(2),
thead th:nth-child(3) {
  z-index: 5; /* 高于表头行和内容列 */
}

关键注意事项 #

• 不要重复定义相同选择器的CSS规则，会导致样式冲突。
• top和left的偏移值必须与实际元素高度/宽度匹配，建议给列设置固定宽度，避免自适应宽度导致偏移不准。
• 确保表格容器的overflow设置为auto，否则sticky定位不会生效。

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