如何使用 CSS 修复顶部的表头？

Question

我希望我的表头固定在顶部，并且我在标题中使用Position: sticky;
但它们仅在滚动到一半时保持固定，之后它们会随之移动。

这就是我所做的

<table>
    <thead>
        <th>Firstname</th>
        <th>Lastname</th>
    </thead>
    <tbody>
        <tr>
            <td class="scroll-table">John</td>
            <td class="scroll-table">Doe</td>
        </tr>
    </tbody>
</table>

我正在使用的 CSS

table thead{
    position: sticky;
    top: 0;
    z-index: 11;
}

我希望标题在滚动过程中停留在顶部

Answer 1

尝试将此值应用于th 元素而不是thead：

table th {
    top: 0;
    position: sticky;
    z-index: 11;
}