reactjs - 使用 Reactstrap 响应表的具有固定标题的可滚动表

Question

我有这张表 https://stackblitz.com/edit/reactstrap-v8-pwyocr?file=Example.js 在我的一个项目中实现只是想要的是可以使标题保持不变并且只使表体移动 (像这样的东西:https://v4.mui.com/components/tables/#fixed-header)

谁能帮我解决这个问题

Answer 1

为标题单元格使用粘性位置，并确保使用 z-index 和背景可以在正文单元格上方看到它们

react :

...
<Table height="200" bordered className="fixed-header">
...

CSS:

.fixed-header thead th { /* the thead selector is required because there are th elements in the body */
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: white;
}

注意:该解决方案可能会导致页眉边框出现问题 - 它们不会在滚动中显示。这个问题建议了该问题的可能解决方案: Table headers position:sticky and border issue