csslayout/contents/sticky-table-column.md

layout, title, description, keywords

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

HTML

<table class="sticky-table-column">
    <thead>
        <tr>
            <th class="sticky-table-column__sticky">
                ...
            </th>

            <!-- Other header column ... -->
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="sticky-table-column__sticky">...</td>
            <!-- Other columns ... -->
        </tr>
    </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-column.njk" %} {% enddemo %}