Question

我要在滚动时使表格theader保持粘性，以便在滚动时始终看到表格的标题。

我尝试了一下，但是它什么也没做。

反应渲染：

<table class="table text-center align-middle" style={{ width: this.state.PercentTable }}>
    <thead class="bgColor stickyHeader">
        <tr>
            <th style={{ width: "3%", paddingRight: "0" }}></th>
            <th style={{ width: this.state.PercentCell }}></th>
                {list_1}
        </tr>
     </thead>
     {list_2}
</table>

CSS样式：

.stickyHeader {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

表不在视图的顶部（这就是为什么我想保持粘性而不固定的原因）。

这是一个有效的示例：Working example

感谢您的帮助。

Answer 1

有很多方法可以实现这一目标。我建议您使用一个npm软件包，以节省您的时间和精力。签出：react-sticky-table-thead 您要做的就是将一个组件包装在表周围，例如：

<StickyHeader>
  <table>
    <thead>
      <tr><th>Head</th></tr>
    </thead>
    <tbody>
      <tr><td>Data</td></tr>
    </tbody>
  </table>
</StickyHeader>

Answer 2

制作2张桌子。将它们包装成div。第一个表用作标题并使其具有粘性

表中的粘滞位置在ReactJs中不起作用

2 个答案: