使用浏览器滚动条上的静态标头对表进行反应

Question

是否有用于反应的表组件，当浏览器滚动条滚动它的长主体时，该组件具有固定的标题？（表的高度随着用户单击“加载更多”而增加）。这是一个代码示例：https : //codesandbox.io/s/rm0x6lmypm 表头在浏览器滚动时应保持静态。

Answer 1

好的，我做了一些可怕的CSS更改，现在它似乎可以按需运行：https : //codesandbox.io/s/18kqoyjq8j 基本上，我将样式添加react-table如下：

.ReactTable {
  margin-top: 74px;
}

.ReactTable .rt-tbody {
  margin-top: 30px;
}

.ReactTable .rt-thead {
  background-color: white;
  position: fixed;
  top: 1;
  z-index: 1;
  width: calc(100% - 17px);
  height: 31px;
}

因此，表头现在固定在页面头下，我们可以使用浏览器滚动条来滚动表的主体。