Home/Explore/

Sticky table column

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
Try to scroll the main content of table horizontally to see the first column sticks to the left.
<table>
    <thead>
        <tr>
            <th style="
                /* Background color */
                background-color: #ddd;

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

                /* Displayed on top of other rows when scrolling */
                z-index: 9999;
            ">
                ...
            </th>

            <!-- Repeat other header column ... -->
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Related patterns

Sticky header

Sticky sections

Sticky table headers

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!