Sticky table column

Try to scroll the main content of table horizontally to see the first column sticks to the left.

<table>
    <thead>
        <tr>
            <th class="header">
                ...
            </th>

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

.header {
                        /* Background color */
                        background-color: #ddd;

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

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

See also

Sticky header

Sticky sections

Sticky table headers