如何使用CSS在顶部修复表格标题? [英] How to fix Table Headers at the top using CSS?

问题描述

我希望将表标题固定在顶部，并在广告
中使用 Position:sticky; 但它们仅在滚动过程的一半时保持固定，然后随其一起移动.

I want my Table Headers to be fixed at the top and I am using Position: sticky; in thead
but they remain fixed only halfway through the scrolling and after that they move along with it.

这就是我所做的

<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;
}

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

I want the thead to stick at the top during Scrolling

推荐答案

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

Try to apply this values for the th elements instead of thead:

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

这篇关于如何使用CSS在顶部修复表格标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！