使用 React 样式组件使表格的左列粘性

Question

使用样式组件，我创建了以下样式元素。我的目标是使第一行和第一列“粘性”，因此当用户滚动表格时，它们始终保持在固定位置。该表的结构如下：

<WrapperDiv>
  <StyledTable>
    <StyledHeaderRow>
      <StyledTh>
        <StyledCell />
      <StyledTh />
    <StyledHeaderRow />
    <StyledRow>
      <StyledTd>
        <StyledCell />
      <StyledTd />
    <StyledRow />
  <StyledTable />
<WrapperDiv />

const WrapperDiv = styled.div`
  overflow: scroll;
  border: 1px solid var(--color-grey-100);
  background-color: var(--color-grey-0);
  border-radius: 2rem;
`;

const StyledTable = styled.table`
  font-size: 1.4rem;
  overflow: hidden;
  background-color: var(--color-grey-0);
`;

const StyledRow = styled.tr`
  border-top: 1px solid var(--color-grey-200);
  border-bottom: 1px solid var(--color-grey-200);
  background-color: inherit;
  transition: all 0.3s;
  &:last-child {
    border-bottom: none;
  }
  &:nth-child(odd) {
    background-color: var(--color-grey-100);
  }
`;

const StyledHeaderRow = styled.tr`
  border-top: 1px solid var(--color-grey-200);
  border-bottom: 1px solid var(--color-grey-200);
  background-color: inherit;
  &:first-child {
    border-top: none;
  }
  &:last-child {
    border-bottom: 2px solid var(--color-grey-200);
  }
  &:hover {
    background-color: var(--color-grey-200);
  }
`;

const StyledTd = styled.td`
  white-space: nowrap;
  background-color: inherit;
  &:first-child {
    position: sticky;
  }
`;

const StyledTh = styled.th`
  white-space: nowrap;
  background-color: inherit;
  &:first-child {
    position: sticky;
  }
`;

const StyledCell = styled.div`
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-right: 1rem;
  margin-left: 1rem;
  text-align: center;
`;

我将非常感谢任何帮助！

为了实现上述目标，我尝试将类型的第一个子元素的位置设置为粘性，但是没有任何变化，并且表格照常滚动。此外，我尝试了绝对定位，但这引入了一系列新问题，所以我想避免它。

Answer 1

您需要确保正确应用“position：sticky”并设置相关的顶部和左侧属性。

`const WrapperDiv = styled.div`
  overflow: scroll;
  border: 1px solid var(--color-grey-100);
  background-color: var(--color-grey-0);
  border-radius: 2rem;
`;

const StyledTable = styled.table`
  font-size: 1.4rem;
  overflow: hidden;
  background-color: var(--color-grey-0);
`;

const StyledRow = styled.tr`
  border-top: 1px solid var(--color-grey-200);
  border-bottom: 1px solid var(--color-grey-200);
  background-color: inherit;
  transition: all 0.3s;
  &:last-child {
    border-bottom: none;
  }
  &:nth-child(odd) {
    background-color: var(--color-grey-100);
  }
`;

const StyledHeaderRow = styled.tr`
  border-top: 1px solid var(--color-grey-200);
  border-bottom: 1px solid var(--color-grey-200);
  background-color: inherit;
  &:first-child {
    border-top: none;
  }
  &:last-child {
    border-bottom: 2px solid var(--color-grey-200);
  }
  &:hover {
    background-color: var(--color-grey-200);
  }
`;

const StyledTd = styled.td`
  white-space: nowrap;
  background-color: inherit;
  &:first-child {
    position: sticky;
    left: 0;
    background-color: inherit; /* Ensure background matches */
    z-index: 1; /* Ensure it appears above other cells */
  }
`;

const StyledTh = styled.th`
  white-space: nowrap;
  background-color: inherit;
  &:first-child {
    position: sticky;
    left: 0;
    background-color: inherit; /* Ensure background matches */
    z-index: 2; /* Ensure it appears above other cells, especially the first td */
  }
`;

const StyledCell = styled.div`
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-right: 1rem;
  margin-left: 1rem;
  text-align: center;
`;

const StyledHeaderCell = styled(StyledCell)`
  position: sticky;
  top: 0;
  z-index: 3; /* Highest z-index to appear above all other cells */
  background-color: inherit; /* Ensure background matches */
`;

// Update the JSX structure to use StyledHeaderCell for headers
<WrapperDiv>
  <StyledTable>
    <StyledHeaderRow>
      <StyledTh>
        <StyledHeaderCell>Header 1</StyledHeaderCell>
      </StyledTh>
      <StyledTh>Header 2</StyledTh>
      {/* Add more headers as needed */}
    </StyledHeaderRow>
    <StyledRow>
      <StyledTd>
        <StyledCell>Row 1, Column 1</StyledCell>
      </StyledTd>
      <StyledTd>Row 1, Column 2</StyledTd>
      {/* Add more cells as needed */}
    </StyledRow>
    {/* Add more rows as needed */}
  </StyledTable>
</WrapperDiv>
`