Table with Sticky First Column

<!DOCTYPE html>
<title>My Example</title>

.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>