在具有两级行跨度的表上定位粘性答案

【问题标题】：Position sticky on table with two levels of rowspan在具有两级行跨度的表上定位粘性
【发布时间】：2023-04-01 02:36:01
【问题描述】：

我有这张桌子：

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

td 和rowspan 可以正常工作，当下一行出现在表格中时它会被隐藏。但是第一个th 元素（DEV）不起作用，它在第二个th（ED）出现之前就被隐藏了，第二个也没有粘性。

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

【问题讨论】：

标签： html css scroll css-position sticky

【解决方案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>

【讨论】：