html - 仅卡住 html 表格的顶行(固定表格标题滚动)

Question

我想制作一个顶行卡住的 html 表格(这样当您垂直向下滚动时，您总能看到它)。

有没有聪明的方法可以在没有 javascript 的情况下实现这一点？

请注意，我不需要卡住左列。

Answer 1

我知道这有几个答案，但这些都没有真正帮助我。我发现 [这篇文章][1] 这解释了为什么我的 sticky没有按预期运行。

基本上，您不能使用 position: sticky;在 <thead>或 <tr>元素。但是，它们可以用于 <th> .

让它工作所需的最少代码如下:

table {
  text-align: left;
  position: relative;
}

th {
  background: white;
  position: sticky;
  top: 0;
}

将表设置为相对 <th>可以设置为粘性，顶部为 0 [1]: https://css-tricks.com/position-sticky-and-table-headers/

注意:必须用最大高度的 div 包裹表格:

<div id="managerTable" >
...
</div>

哪里:

#managerTable {
    max-height: 500px;
    overflow: auto;
}