Table with Sticky First Column Template

Keep row context in view on wide tables with this sticky first column effect.

Using position: sticky, this template freezes the first column, allowing users to scroll horizontally through many columns of data without ever losing track of which row they are on.

Screenshot of a wide table being scrolled horizontally, with the first column remaining frozen in place.

Get Source Code → Preview →

About this Sticky Column Table

This template is the perfect companion to a horizontally scrollable table. When dealing with wide datasets, it's easy for a user to scroll right and forget which item the data belongs to. By making the first column "sticky", you ensure the primary identifier for that row (like a name, ID, or product) is always visible.

This is achieved using the same modern CSS property as the sticky header: position: sticky. By applying this property along with left: 0; to the first th and td in each row, they will "stick" to the left edge of the scrolling container. A solid background color on these sticky cells is crucial to hide the other columns as they scroll underneath.

Key Features:

Retains Row Context: The first column acts as a constant anchor, making wide tables much easier to understand.
CSS-Only Solution: A modern, performant solution that doesn't require any JavaScript.
Essential for Wide Data: A massive user experience improvement for tables with many columns.

Important Implementation Notes:

Like the sticky header, this technique requires the table to be inside a container with overflow-x: auto.
A background-color must be set on the sticky cells (both th and td) so that other cells scroll "behind" them cleanly.
This template also makes the header sticky, showing how you can combine both effects for the ultimate responsive table. A higher z-index is given to the top-left corner cell to ensure it sits on top of both the header and the first column.

Dependencies:

None. Relies on modern browser support for position: sticky.

Code

Here's the full code for the sticky first column table:

.sticky-column-table {
    width: 100%;
    /* Use a min-width to ensure the table is wider than the container */
    min-width: 1200px; 
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Basic Cell Styling --- */
.sticky-column-table th,
.sticky-column-table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: center;
}
.sticky-column-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* --- The Sticky Logic --- */
.sticky-column-table thead th {
    /* Make all header cells sticky to the top */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2; /* Needs to be higher than body cells */
}

/* Make all first-child th and td elements sticky to the left */
.sticky-column-table th:first-child,
.sticky-column-table td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 1; /* Sits below the header but above the rest of the body */

/* Must have a background to hide content scrolling under it */
    background-color: #f2f2f2; 
}
.sticky-column-table tbody td:first-child {
    background-color: #f8f9fa; /* A slightly different color for the body column */
    font-weight: 500;
}

/* The top-left corner cell needs the highest z-index */
/* to sit on top of both the header row and the first column */
.sticky-column-table thead th:first-child {
    z-index: 3;
}
</style>

<div class="sticky-column-container">
    <table class="sticky-column-table">
        <thead>
            <tr>
                <th scope="col">Product Name</th>
                <th scope="col">Q1 Sales</th>
                <th scope="col">Q2 Sales</th>
                <th scope="col">Q3 Sales</th>
                <th scope="col">Q4 Sales</th>
                <th scope="col">Total Units</th>
                <th scope="col">Total Revenue</th>
                <th scope="col">Avg. Price</th>
                <th scope="col">In Stock?</th>
                <th scope="col">Lead Time</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Gadget Pro</th>
                <td>1,200</td><td>1,500</td><td>1,800</td><td>2,200</td>
                <td>6,700</td><td>$669,330</td><td>$99.90</td>
                <td>Yes</td><td>3 days</td>
            </tr>
            <tr>
                <th scope="row">Widget Mini</th>
                <td>3,500</td><td>3,800</td><td>3,200</td><td>4,100</td>
                <td>14,600</td><td>$436,540</td><td>$29.90</td>
                <td>Yes</td><td>1 day</td>
            </tr>
            <tr>
                <th scope="row">Gizmo Max</th>
                <td>800</td><td>950</td><td>1,100</td><td>1,300</td>
                <td>4,150</td><td>$825,850</td><td>$199.00</td>
                <td>No</td><td>14 days</td>
            </tr>
            <tr>
                <th scope="row">Thingamajig</th>
                <td>5,000</td><td>5,200</td><td>5,500</td><td>4,800</td>
                <td>20,500</td><td>$204,795</td><td>$9.99</td>
                <td>Yes</td><td>2 days</td>
            </tr>
             <tr>
                <th scope="row">Doodad Deluxe</th>
                <td>2,100</td><td>1,900</td><td>2,300</td><td>2,500</td>
                <td>8,800</td><td>$439,120</td><td>$49.90</td>
                <td>Yes</td><td>5 days</td>
            </tr>
             <tr>
                <th scope="row">Contraption</th>
                <td>9,000</td><td>8,500</td><td>9,200</td><td>9,800</td>
                <td>36,500</td><td>$182,135</td><td>$4.99</td>
                <td>Yes</td><td>1 day</td>
            </tr>
        </tbody>
    </table>
</div>

View Output