合并单元格中position:sticky失效问题排查与解决方案求助

期望在表格横向滚动时固定左侧第一列和第二列，使用position:sticky实现列固定。该属性在普通列上正常工作，但在设置了colspan="5"的合并单元格上无法生效；将colspan="5"改为colspan="1"后，sticky属性恢复正常。

相关代码如下：

CSS代码 #

body {
    background-color: #f7f7f7;
}
.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;
        transition: background 0.3s;
        content: '';
        pointer-events: none;
        background-image: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.08) 0%,
            rgba(0, 0, 0, 0) 100%
        );
    }
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Table</title>
</head>
<body>
    <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>
</body>
</html>

position:sticky在表格单元格中生效的核心前提是，单元格属于表格的单列布局流。当单元格设置colspan跨越多个列时，浏览器渲染引擎无法正确计算sticky元素的定位边界：

1. 合并单元格同时覆盖了sticky列和非sticky列，浏览器无法确定该元素应该附着在哪个列的位置；
2. 即使设置了table-layout: fixed固定列宽，合并单元格的跨列特性也会破坏sticky元素的包含块逻辑，导致浏览器直接忽略position:sticky属性。

方案一：拆分合并单元格，用伪元素模拟跨列视觉效果 #

保留sticky列的合并（仅合并前两列），通过伪元素填充剩余列的空间，视觉上保持跨列效果，同时让sticky属性正常工作。

修改后的关键代码：

HTML调整

将合并单元格的colspan="5"改为colspan="2"，并新增类名sticky-full：

<tr>
    <td colspan="2" class="sticky sticky-full">SEX: Male</td>
</tr>
<tr>
    <td colspan="2" class="sticky sticky-full">SEX: Female</td>
</tr>

CSS新增样式

.sticky-full {
    position: relative;
}
.sticky-full::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 0;
    height: 100%;
    width: calc(100% - 240px); /* 240为前两列宽度之和：80+160，需与实际列宽匹配 */
    background-color: #fff;
    border-bottom: 1px solid #000;
}
/* 可选：让容器宽度自适应，避免calc计算偏差 */
.container {
    width: min(500px, 100%);
}

方案二：用div模拟表格结构 #

如果业务允许，将原生表格替换为div布局，利用div更灵活的定位逻辑实现sticky跨列效果。示例结构如下：

<div class="container">
    <div class="table-row header">
        <div class="cell sticky">Id</div>
        <div class="cell sticky sticky-tow">Name</div>
        <div class="cell">Age</div>
        <div class="cell">Sex</div>
        <div class="cell">Address</div>
    </div>
    <div class="table-row">
        <div class="cell sticky full">SEX: Male</div>
    </div>
    <!-- 其他行省略 -->
</div>

对应的CSS需要设置display: flex模拟表格行，给每个cell设置对应宽度，sticky逻辑与之前一致，跨列元素直接设置flex: 1或固定宽度覆盖所有列即可。

内容的提问来源于stack exchange，提问作者luichooy