为什么这个类似 html 表格的结构在离开视口时不会垂直滚动，并带有粘性标题和粘性第一列？

Question

在将真实数据放入其中并将其重构为 React 组件之前，我试图弄清楚如何为类似表格的结构构建这个基本模板（我知道它不是一个实际的表格）。我有这个表的自动水平滚动有点工作，除了在一定量的水平滚动到右侧之后，第一列随着粘性单元格消失到左侧。我也无法获得任何自动垂直滚动来处理粘性标题，如果我尝试向主容器添加高度，整个表格会垂直滚动，包括标题行，而不是标题行保持粘性。我在这里有一个例子 https://codesandbox.io/p/devbox/dependent-pine-forked-cqwm6f

我也尝试过使用表格执行此操作，但通过使用粘性第一列和粘性标题水平和垂直滚动，得到了类似的结果。我尝试用

.tr-matrix

包装行部分的

overflow-y: auto;

类，但随后我得到两个水平滚动条。我尝试过各种其他方法，但我似乎只能使垂直滚动正常工作或使水平滚动稍微正常工作，但不能同时使标题和第一列保持粘性或真正固定。有人对如何正确执行此操作有任何想法吗？

  <div className="tr-matrix-container">
    <section className="tr-matrix-header">
      <span className="tr-header-col tr-zoom-level-cell">hi</span>
      <span className="tr-header-col">1</span>
      <span className="tr-header-col">2</span>
      <span className="tr-header-col">3</span>
      <span className="tr-header-col">4</span>
      <span className="tr-header-col">5</span>
      <span className="tr-header-col">6</span>
    </section>
    <div className="tr-matrix">
      <section className="tr-row">
        <span className="tr-resource-cell">Resource Name</span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
      </section>
      <section className="tr-row">
        <span className="tr-resource-cell">Resource Name</span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
      </section>
      <section className="tr-row">
        <span className="tr-resource-cell">Resource Name</span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
      </section>
      <section className="tr-row">
        <span className="tr-resource-cell">Resource Name</span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
      </section>
      <section className="tr-row">
        <span className="tr-resource-cell">Resource Name</span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
        <span className="tr-cell"></span>
      </section>
    </div>
  </div>

$headerHeight: 2.5rem;
$resourceCellWidth: 8.5rem;
$rowHeight: 7.5rem;
$rowWidth: 16.625rem;

html,
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.tr-matrix-container {
  position: relative;
  overflow-x: auto;

  // matrix header
  .tr-matrix-header {
    display: flex;
    height: $headerHeight;

    .tr-header-col {
      position: sticky;
      top: 0;
      left: 0;
      z-index: 1;
      width: $rowWidth;
      background-color: #333333;
      color: #ffffff;
      border: 1px solid #cbcbcb;
      box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.6);
      box-sizing: border-box;
      flex-shrink: 0;
    }

    .tr-zoom-level-cell {
      position: sticky;
      top: 0;
      left: 0;
      z-index: 2;
      width: $resourceCellWidth;
      height: $headerHeight;
      box-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.6);
    }
  }

  // matrix rows
  .tr-matrix {
    .tr-row {
      display: flex;
      height: $rowHeight;
    }

    .tr-resource-cell {
      position: sticky;
      top: 0;
      left: 0;
      z-index: 1;
      background-color: #ffffff;
      width: $resourceCellWidth;
      border: 1px solid #cbcbcb;
      border-top-width: 0;
      box-sizing: border-box;
      box-shadow: 0.2rem 0 0.2rem rgba(0, 0, 0, 0.5);
      flex-shrink: 0;
    }

    .tr-cell {
      width: $rowWidth;
      border: 1px solid #cbcbcb;
      border-left-width: 0;
      border-top-width: 0;
      box-sizing: border-box;
      flex-shrink: 0;
    }
  }
}

Answer 1

给你 - 代码的工作分支。

要解决滚动条问题，您需要摆脱

overflows

。

除非向右水平滚动一定量后，第一列会随着粘性单元格向左侧消失。

当表格滚动到视口宽度之外时，就会发生这种情况。您需要在正文中指定必要的宽度来解决该问题。检查我的叉子上的代码。 （仅更改了

styles.scss

文件。其他内容与您的相同。）

我更改了

z-index

的

.tr-zoom-level-cell

，以防止“hi”位于水平和垂直粘性滚动条后面。根据你的喜好改变它。