仅使用 CSS 使第一列在反应表中保持粘性

Question

我正在尝试将反应表的第一列呈现为粘性。尽管每行的第一个单元格并不像预期的那样真正粘稠，但它几乎可以工作。这是有问题的代码和框工作示例代码。 https://codesandbox.io/embed/objective-frog-m4imr?fontsize=14&hidenavigation=1&theme=dark。在这段代码中，当我水平滚动时，第一列中的第一个标题是粘性的，但第一列中的其余标题不是粘性的，即使它们具有相同的 CSS 样式。

这个问题可能是重复的，但我正在寻找不需要 jQuery 的解决方案，因为我只想使用 CSS。而且我不想使用其他问题中提到的任何其他位置，例如绝对或相对。

如果有人能帮我解决这个问题，那就太好了！

Answer 1

经过几个小时的折腾，问题是 tr 的父元素 tbody 上的溢出属性。一旦我从 tbody 本身删除溢出属性，它就会起作用并且第 1 列是粘性的。

虽然，一旦我从 tbody 样式中删除溢出，第一列是粘性的，但提出的另一个问题是第一个标题行不再粘性，因为没有给出溢出样式。但是我制作第一行贴纸很容易，只有位置粘性。

解决方案：

对于任何使用 react table 并希望在没有包和 jQuery 的情况下使第一列和第一个标题更粘的人，只有 CSS

https://codesandbox.io/s/objective-frog-m4imr?fontsize=14&hidenavigation=1&theme=dark

Answer 2

table 使用新的布局样式有点棘手，所以我使用grid 编写了一个有效的 POC：

section {
  width: 600px;
  height: 200px;
  position: relative;
  overflow: scroll;
  display: grid;
  grid-template-columns: repeat(6, 200px);
  grid-template-rows: repeat(6, 50px)
}

div,
header {
  background: white;
  border: solid;
}

.rh {
  position: sticky;
  left: 0;
}

header {
  position: sticky;
  top: 0;
}

header:first-child {
  left: 0;
  z-index: 100;
}

<section>
  <header>header</header>
  <header>header2</header>
  <header>header3</header>
  <header>header4</header>
  <header>header5</header>
  <header>header6</header>
  <div class="rh">r-header</div>
  <div>text2</div>
  <div>text3</div>
  <div>text4</div>
  <div>text5</div>
  <div>text6</div>
  <div class="rh">r-header</div>
  <div>text2</div>
  <div>text3</div>
  <div>text4</div>
  <div>text5</div>
  <div>text6</div>
  <div class="rh">r-header</div>
  <div>text2</div>
  <div>text3</div>
  <div>text4</div>
  <div>text5</div>
  <div>text6</div>
  <div class="rh">r-header</div>
  <div>text2</div>
  <div>text3</div>
  <div>text4</div>
  <div>text5</div>
  <div>text6</div>
  <div class="rh">r-header</div>
  <div>text2</div>
  <div>text3</div>
  <div>text4</div>
  <div>text5</div>
  <div>text6</div>
</section>