CSS固定首列与表头问题：首列表头无法固定求助

问题分析 #

你的代码中首列普通单元格能正常固定，但首列表头失效，核心原因有三点：

1. 首列表头的行内BACKGROUND样式覆盖了CSS设置的背景，导致视觉上看不出固定效果
2. 首列表头未同时生效top:0和left:0的粘性定位规则
3. 首列表头的层级（z-index）低于其他表头，滚动时会被覆盖

修复后的完整代码 #

CSS部分

.Section1 {
    margin: auto;
    margin-top: 3rem;
    overflow-x: auto;
    /* 添加垂直滚动容器配置，触发表头垂直固定 */
    overflow-y: auto;
    max-height: 400px;
}

/* 全局表头垂直固定 */
table th {
    position: sticky;
    top: 0;
    z-index: 1;
    border-top: 0;
    background: #ededed !important;
}

/* 首列（表头+单元格）水平固定，同时继承垂直固定 */
tr>th:first-child, tr>td:first-child {
    position: sticky;
    left: 0;
    background: #eca980 !important;
    z-index: 2; /* 提高层级避免被其他表头覆盖 */
}

HTML优化建议

尽量移除行内样式，保持样式与结构分离，比如将<tr class="GridTitle"的行内BACKGROUND属性删除，改用CSS控制：

tr.GridTitle {
    background: transparent;
}

关键修改说明 #

• 给容器.Section1添加overflow-y: auto和max-height，让垂直滚动的上下文限定在容器内，确保top:0的粘性定位生效
• 使用!important强制覆盖行内的背景样式（如果无法移除行内样式时使用）
• 给首列元素设置z-index:2，确保首列表头在滚动时不会被其他表头单元格遮挡
• 首列表头同时继承了table th的top:0和自身的left:0，实现同时固定顶部和左侧的效果

内容的提问来源于stack exchange，提问作者Alfredo Zea García-Calderón