Позиция: липкий не работает в объединенной ячейке

Я хочу исправить первый и второй столбцы таблицы слева, когда таблица прокручивается по горизонтали. Я использовал position:sticky для фиксации колонны, и она отлично работает с обычными колоннами. Однако я объединил ячейки в своей таблице, и sticky не работает должным образом в этих объединенных ячейках.

Вот ссылка на репродукцию.

Может ли кто-нибудь любезно поделиться своим мнением о причине этой проблемы и предложить потенциальные решения для ее решения? Спасибо.

HTML, как показано ниже:

<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, как показано ниже:

.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%
        );
    }
}

Я пытаюсь изменить colpan = "5" на colspan = "1" в объединенной ячейке, и sticky снова работает правильно.

Я ожидаю, что sticky будет нормально работать с объединенными ячейками.