使用 Reactstrap 响应式表的带有固定标题的可滚动表

Posted 2023-03-23

【中文标题】使用 Reactstrap 响应式表的带有固定标题的可滚动表

【英文标题】：Scrollable Table with Fixed Header using Reactstrap responsive table

【发布时间】：2021-12-17 03:11:12

【问题描述】：

我有这张桌子https://stackblitz.com/edit/reactstrap-v8-pwyocr?file=Example.js 在我想要的一个项目中实现的是它可以使标题保持不变并让表格的主体移动 （类似这样的东西：https://v4.mui.com/components/tables/#fixed-header）

任何人都可以在这方面帮助我

【参考方案1】：

对标题单元格使用粘性位置，并确保使用 z-index 和背景将它们显示在正文单元格上方

反应：

...
<Table  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

【参考方案2】：

只需为表格主体设置固定高度并使其溢出，滚动。 即

.table-body 
 height: 600px;
 overflow-x: scroll;

【参考方案3】：

您可以在 example.js 中添加此样式。

const style = 
  table: 
    width: '100%',
    display: 'table',
    borderSpacing: 0,
    borderCollapse: 'separate',
  ,
  th: 
    top: 0,
    left: 0,
    zIndex: 2,
    position: 'sticky',
    backgroundColor: '#fff',
  ,
;

然后使用Table&th元素标签上的样式

<Table bordered  style=style.table>
   <thead>
      <tr>
        <th style=style.th>#</th>
        <th style=style.th>First Name</th>
        <th style=style.th>Last Name</th>
        <th style=style.th>Username</th>
      </tr>
 </thead>

这是工作的 example code on Stackblitz

查看result

采用 MUI V4 Fixed Header

【参考方案4】：

只需从div arround 表中删除溢出并将其传递给tbody，并为thead 和tbody 定义高度。