GitHub 6956★

Have you seen CSS Scan?

The fastest and easiest way to check, copy and edit CSS.

Learn more →

CSS Scan logo

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
Follow me on and to get more useful contents.