I want to fix the first and second columns of a table in left when the table scrolls horizontally. I used position:sticky for column fixation and it works fine on normal columns. However, I have merged cells in my table and sticky does not work properly on these merged cells.

Could someone kindly share insights into the cause of this issue and propose potential solutions to resolve it? Thank you.

HTML as below:

<div class="container">
    <table style="table-layout: fixed">
        <colgroup>
            <col width="80" />
            <col width="160" />
            <col width="80" />
            <col width="80" />
        </colgroup>
        <thead>
            <tr>
                <th class="sticky">Id</th>
                <th class="sticky sticky-tow">Name</th>
                <th>Age</th>
                <th>Sex</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="5" class="sticky">SEX: Male</td>
            </tr>

            <tr>
                <td class="sticky">1</td>
                <td class="sticky sticky-tow">John Doe</td>
                <td>25</td>
                <td>male</td>
                <td>123 Main St, Springfield, IL</td>
            </tr>
            <tr>
                <td class="sticky">2</td>
                <td class="sticky sticky-tow">John Doe</td>
                <td>25</td>
                <td>male</td>
                <td>123 Main St, Springfield, IL</td>
            </tr>
            <tr>
                <td class="sticky">3</td>
                <td class="sticky sticky-tow">John Doe</td>
                <td>25</td>
                <td>male</td>
                <td>123 Main St, Springfield, IL</td>
            </tr>

                        <tr>
                <td colspan="5" class="sticky">SEX: Female</td>
            </tr>

            <tr>
                <td class="sticky">4</td>
                <td class="sticky sticky-tow">John Doe</td>
                <td>25</td>
                <td>male</td>
                <td>123 Main St, Springfield, IL</td>
            </tr>
            <tr>
                <td class="sticky">5</td>
                <td class="sticky sticky-tow">John Doe</td>
                <td>25</td>
                <td>male</td>
                <td>123 Main St, Springfield, IL</td>
            </tr>
        </tbody>
    </table>
</div>

CSS as below:

.container {
    margin: 0 auto;
    margin-top: 100px;
    width: 500px;
    overflow: auto;
    background-color: #fff;
}

table {
    width: 800px;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: left;

    td,
    th {
        border-bottom: 1px solid #000;
        padding: 8px 12px 8px 16px;
    }

    .sticky {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: #fff;
    }

    .sticky-tow {
        left: 80px;
    }

    .sticky-tow::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: -1px;
        width: 15px;
        content: '';
        pointer-events: none;
        background-image: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.08) 0%,
            rgba(0, 0, 0, 0) 100%
        );
    }
}

I try to change colpan="5" to colspan="1" on merged cell,and sticky is back to working properly.

I expect sticky to work fine on merged cells.