ReactJS动态表格：已冻结首行，如何实现首列冻结？

要实现首列冻结，和你已经实现的表头冻结思路一致，用position: sticky属性即可，只需补充首列的定位规则，同时处理好层级和背景遮挡问题，具体操作如下：

1. 给表格容器添加滚动容器 #

首先确保表格外层容器具备滚动能力，这是sticky属性生效的前提：

<div style={{ overflow: 'auto', maxHeight: '600px', width: '100%' }}>
  {/* 表格放在此容器内 */}
</div>

2. 更新CSS样式 #

修改你的CSS，同时完善表头和首列的冻结规则，添加层级和背景色避免遮挡：

/* 表头首行冻结 */
table thead {
  position: sticky;
  top: 0;
  z-index: 2; /* 确保表头在所有内容上方 */
  background: #f1f1f1;
}

/* 全局首列冻结（包含表头首列和tbody首列） */
table th:first-child {
  position: sticky;
  left: 0;
  background: white; /* 设置背景色，防止滚动时被后方内容穿透 */
}

/* 表头首列单独提升层级，避免被其他表头单元格遮挡 */
table thead th:first-child {
  z-index: 3;
  background: #f1f1f1;
}

/* 可选优化：让表格边框更清晰 */
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

3. 优化后的完整App.js代码 #

你的原有表格结构已经用<th>标记了首列，无需大幅修改，仅补充容器和key属性（避免React警告）即可：

import "./styles.css";
import React from "react";

export default function App() {
  const weeksCount=11
  const Data=[ [3, '', '', '', '', '', '', '', '', '', '', 3, 0],
  [2, '', '', '', '', '', '', '', '', '', 2, 0],
  [1, '', '', '', '', '', '', '', '', 1, 0],
  ['-', '', '', '', '', '', '', '', 0, 0],
  ['-', '', '', '', '', '', '', 0, 0],
  [11, 3, 4, '', '', '', 4, 7],
  [8, 6, 1, '', '', 1, 7],
  [1, '', '', '', 1, 0],
  ['-', '', '', 0, 0],
  ['-', '', 0, 0],
  ['-', 0, 0]];


  return (
    <div style={{ overflow: 'auto', maxHeight: '600px', width: '100%' }}>
      <table>
        <thead>
          <tr>
            <th>Week</th>
            {new Array(weeksCount)?.fill(null)?.map((_, i) => {
              return (
                <th key={`header-week-${i}`}>
                  <div>{i + 1}</div>
                </th>
              );
            })}
            <th>Net Win</th>
            <th>Net Lose</th>
          </tr>
        </thead>
        <tbody>
          {Data?.slice(0, weeksCount)?.map((item, index) => {
            return (
              <tr key={`row-top-${index}`}>
                <th>{index + 1}</th>
                {[...Array(Data[0].length - item.length)]?.map((_, idx) => (
                  <td key={`empty-top-${index}-${idx}`} />
                ))}
                {item?.map((itm, idx) => (
                  <td key={`data-top-${index}-${idx}`}>{itm}</td>
                ))}
              </tr>
            );
          })}

          {Data?.slice(weeksCount)?.map((item, index) => {
            return (
              <tr key={`row-bottom-${index}`}>
                <th />
                {[...Array(Data[0].length - item.length)]?.map((_, idx) => (
                  <td key={`empty-bottom-${index}-${idx}`} />
                ))}
                {item?.map((itm, idx) => (
                  <td key={`data-bottom-${index}-${idx}`}>{itm}</td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

关键注意点 #

• z-index层级必须合理设置：表头首列层级最高，避免被其他表头单元格遮挡；表头整体层级次之，确保在内容上方；首列层级最低，保证不遮挡表头。
• 一定要给sticky定位的单元格设置背景色，否则滚动时后方内容会穿透显示。
• 容器的overflow: auto是触发sticky效果的必要条件，没有滚动容器的话，单元格无法固定。

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