csslayout/contents/sticky-table-headers.md

layout, title, description, keywords

layout	title	description	keywords
layouts/post.njk	Sticky table headers	Create sticky table headers with CSS	css position sticky, css sticky table headers

HTML

<table class="sticky-table-headers">
    <thead>
        <tr class="sticky-table-headers__sticky"></tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

CSS

.sticky-table-headers__sticky {
    /* Background color */
    background-color: #9ca3af;

    /* Stick to the left */
    left: 0;
    position: sticky;

    /* Displayed on top of other rows when scrolling */
    z-index: 9999;
}

{% demo %} {% include "covers/sticky-table-headers.njk" %} {% enddemo %}