在具有两级行跨度的表上定位粘滞

Question

我有一张桌子：

.level-2 [rowspan] {
    position: sticky;
    vertical-align: top;
    top: 0;
    background: white;
}
.collapsible {
    overflow-y: auto;
    height: calc(37px * 6);
}
.collapsible table {
    border-collapse: separate;
}

<table>
    <tr class="level-2 agragated-2-row">
        <th rowspan="9">DEV</th>
        <td rowspan="3">Cancer Immunolofy</td>
        <td>2020</td>
        <td>4%</td>
        <td>16</td>
    </tr>
    <tr class="level-2">
        <td>2019</td>
        <td>1%</td>
        <td>2</td>
    </tr>
    <tr class="level-2">
        <td>2018</td>
        <td>2%</td>
        <td>8</td>
    </tr>
    <tr class="level-2 agragated-1-row">
        <td rowspan="3">Immunology</td>
        <td>2020</td>
        <td>4%</td>
        <td>16</td>
    </tr>
    <tr class="level-2">
        <td>2019</td>
        <td>1%</td>
        <td>2</td>
    </tr>
    <tr class="level-2">
        <td>2018</td>
        <td>2%</td>
        <td>8</td>
    </tr>
    <tr class="level-2 agragated-1-row">
        <td rowspan="3">Infectious Diseases</td>
        <td>2020</td>
        <td>4%</td>
        <td>16</td>
    </tr>
    <tr class="level-2">
        <td>2019</td>
        <td>1%</td>
        <td>2</td>
    </tr>
    <tr class="level-2">
        <td>2018</td>
        <td>2%</td>
        <td>8</td>
    </tr>
    <tr class="level-2 agragated-2-row">
        <th rowspan="6">ED</th>
        <td rowspan="3">Cancer Immunology</td>
        <td>2020</td>
        <td>4%</td>
        <td>16</td>
    </tr>
    <tr class="level-2">
        <td>2019</td>
        <td>1%</td>
        <td>2</td>
    </tr>
    <tr class="level-2">
        <td>2018</td>
        <td>2%</td>
        <td>8</td>
    </tr>
    <tr class="level-2 agragated-1-row">
        <td rowspan="3">Immunology</td>
        <td>2020</td>
        <td>4%</td>
        <td>16</td>
    </tr>
    <tr class="level-2">
        <td>2019</td>
        <td>1%</td>
        <td>2</td>
    </tr>
    <tr class="level-2">
        <td>2018</td>
        <td>2%</td>
        <td>8</td>
    </tr>
</table>

使用rowspan的td可以正常工作，当下一行出现在表中时，它将被隐藏。但是第一个th元素(DEV)不起作用，它在第二个th (ED)出现之前就被隐藏了，而且第二个元素也不是粘性的。

这是最后一张表中的演示https://codepen.io/jcubic/pen/NWbXoVB，position: sticky不能正常工作。我该怎么修这张桌子呢？我曾尝试将th更改为td，并将strong设置为粗体文本，但不起作用。在Chrome和Firefox中也有同样的行为。

Answer 1

我已经解决了这个问题，将DEV和ED包装到div中，并使div具有粘性：

.level-2 [rowspan] {
    background: white;
    vertical-align: top;
}
.level-2 [rowspan]:not(.level-0),
.level-2 .level-0 div {
    position: sticky;
    top: 0;
}

<table>
    <tr class="level-2 agragated-2-row">
        <th rowspan="9" class="level-0"><div>DEV</div></th>
        <td rowspan="3">Cancer Immunolofy</td>
        <td>2020</td>
        <td>4%</td>
        <td>16</td>
    </tr>
   ...
</table>