使用Typescript的React-Table：滚动时使整个标题组粘在顶部

w41d8nur 于 2023-05-19 发布在 TypeScript

关注(0)|答案(1)|浏览(175)

我有一个标题组在我的表，我希望该表是可滚动的。我把position: sticky放在表中。当我将overflow: scroll;放入容器的CSS中时，标题会像我希望的那样粘在顶部，但它不会再显示标题组的第二行。
标题组：

{
        Header: 'Author',
        columns: [
            {
                Header: 'First Name',
                accessor: 'author_first',
            },
            {
                Header: 'Last Name',
                accessor: 'author_last'
            }
        ],
    },

没有overflow: scroll;

其中：

我把overflow: scroll放在相应的容器中：

.table-container {
    overflow: scroll;
    display: flex;
    height: 600px;
    width: 90%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

并像这样调用Table：

<div className='table-container'>
   <Table />
</div>

我的表th：

table th {
    position: sticky; /* Keep the table head when scrolling */
    top: 0px;
    z-index: 100; 
}

typescript

来源：https://stackoverflow.com/questions/76236867/react-table-with-typescript-make-the-whole-header-group-stick-to-the-top-when-s

1条答案

按热度按时间

bnlyeluc1#

这就是：
记住，位置sticky只在可滚动的父容器上生成一个sticky元素，所以父容器必须是一个可滚动的元素
祝你好运

const body = document.querySelector(".body");

for (let x = 0; x < 300; x++) {
    const tr = document.createElement("tr");
  tr.innerHTML = "<td>data</td><td>data</td><td>data</td><td>data</td>";
    body.appendChild(tr);
}

table, th, td {
  border: 1px solid;
}

tr {
  width: 100%;
}

thead {
  position: sticky;
  top: 0;
  background-color: white;
}

<table>
  <thead>
    <tr>
      <th>data</th>
      <th>data</th>
      <th>data</th>
      <th>data</th>
    </tr>
  </thead>
  <tbody class="body"></tbody>
</table>

赞(0）回复(0）举报 2023-05-19

我来回答

使用Typescript的React-Table：滚动时使整个标题组粘在顶部

1条答案

相关问题

热门标签

最新问答