表格中的粘性位置在 ReactJs 中不起作用答案

【问题标题】：Sticky position in table doesn't work in ReactJs表格中的粘性位置在 ReactJs 中不起作用
【发布时间】：2023-03-17 08:54:01
【问题描述】：

我想在滚动时使表格 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

感谢您的帮助。

【问题讨论】：

请提供一个工作示例...图片按钮旁边有一个按钮可以插入您的代码。
位置样式可能不适用于表头。
我尝试了一个简单的 div，但得到了相同的结果。
可能重复stackoverflow.com/questions/24840074/…

标签： css reactjs sticky

【解决方案1】：

有很多方法可以实现这一点。我推荐有一个 npm 包，可以节省你的时间和精力。看看：react-sticky-table-thead 你所要做的就是在你的桌子周围包裹一个组件，比如：

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

【讨论】：

【解决方案2】：

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

【讨论】：