如何在React+TypeScript中实现表格前两列（含表头）固定

核心实现方案 #

通过CSS的position: sticky属性，配合表格容器的横向滚动机制，就能实现前两列（表头+列体）的固定效果。关键是给目标单元格设置固定的left偏移量，并确保单元格有背景色，避免滚动时内容重叠。

完整代码示例 #

HTML结构

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>邮箱</th>
        <th>地址</th>
        <th>电话</th>
        <th>部门</th>
        <th>职位</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>张三</td>
        <td>28</td>
        <td>zhangsan@example.com</td>
        <td>北京市朝阳区xxx路</td>
        <td>138xxxx1234</td>
        <td>技术部</td>
        <td>前端开发</td>
      </tr>
      <tr>
        <td>2</td>
        <td>李四</td>
        <td>32</td>
        <td>lisi@example.com</td>
        <td>上海市浦东新区xxx路</td>
        <td>139xxxx5678</td>
        <td>产品部</td>
        <td>产品经理</td>
      </tr>
      <!-- 可添加更多行测试滚动效果 -->
    </tbody>
  </table>
</div>

CSS样式

.table-container {
  overflow-x: auto; /* 让表格容器支持横向滚动 */
  width: 100%;
}

table {
  width: 1200px; /* 设置表格总宽度，确保超出容器宽度触发滚动 */
  border-collapse: collapse; /* 合并边框，避免缝隙 */
}

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

thead th {
  background-color: #f5f5f5;
}

/* 固定第一列表头和列体 */
thead th:first-child,
tbody td:first-child {
  position: sticky;
  left: 0;
  background-color: #f5f5f5; /* 设置背景色，防止滚动时内容穿透 */
  z-index: 1; /* 确保固定列在最上层 */
}

/* 固定第二列表头和列体 */
thead th:nth-child(2),
tbody td:nth-child(2) {
  position: sticky;
  left: 70px; /* 数值需等于第一列的实际宽度，可根据需求调整 */
  background-color: #f5f5f5;
  z-index: 1;
}

关键注意事项 #

• 表格容器必须设置overflow-x: auto，否则横向滚动不生效，sticky属性也无法正常工作
• 固定列的单元格必须设置背景色，否则滚动时后面的单元格内容会透过显示
• left属性的数值需要和前一列的实际宽度匹配，避免列重叠或错位
• 如果表格有复杂边框样式，建议使用border-collapse: collapse避免滚动时边框断裂
• 若需兼容老旧浏览器，可添加position: -webkit-sticky作为前缀

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