html - 如何使用 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;
}

我希望在滚动过程中使标题保持在顶部

标签： htmlcss

Answer 1

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

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