css - 在浏览器滚动上使用静态标题 react 表格

Question

已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足 Stack Overflow guidelines 。目前不接受答案。

---

我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便用事实和引文来回答。

已关闭 5 年前。

Improve this question

是否有一个用于 react 的表格组件，当浏览器滚动条滚动它的长主体时，它会有固定的标题？ (当用户单击“加载更多”时，表格高度会增加)。这是一个代码示例: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;
}

因此表格标题现在固定在页面标题下方，我们可以使用浏览器滚动条滚动表格主体。