React table with static header on browser scroll [closed]

问题

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed last year.

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.

回答1:

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.

来源：https://stackoverflow.com/questions/51803201/react-table-with-static-header-on-browser-scroll