使用浏览器滚动条上的静态标头进行表反应 [英] React table with static header on browser scroll

问题描述

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

Is there a table component for react, which would have fixed header while browser scrollbar scrolls it's long body? (The table height grows as user clicks "Load more"). Here's a code sample: https://codesandbox.io/s/rm0x6lmypm The table header should remain static on browser scroll.

推荐答案

好吧，我做了一些可怕的CSS更改，现在看来它可以按需工作: https://codesandbox.io/s/18kqoyjq8j 基本上，我向 react-table 中添加了样式，如下所示:

Ok, I have made some horrible css changes, now it seems to work as needed: https://codesandbox.io/s/18kqoyjq8j Basically I added styles to react-table as follows:

.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;
}

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

So the table header is now fixed under the page header and we can use browser scrollbar to scroll table's body.

这篇关于使用浏览器滚动条上的静态标头进行表反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！