粘性表头表格滚动时数据行穿透显示问题求助

你的问题核心是粘性表头层级低于tbody内容，导致滚动时被覆盖，同时容器内边距也会影响粘性定位的准确性，以下是具体修复方案：

修复步骤 #

1. 提升表头层级 #

给thead添加z-index属性，确保表头始终显示在表格内容上方：

thead {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10; /* 新增：提升表头层级，避免被内容覆盖 */
}

2. 修正粘性定位偏移 #

你的table-container设置了padding:25px，而thead的top:0是相对于滚动容器内部，这会导致表头粘在容器的内边距区域顶部，视觉上和表格内容错位。可以通过两种方式修正：

方案一：将容器内边距转移到表格上

.table-container {
    position: absolute;
    background-color: white;
    border-radius: 6px;
    border: 1px solid lightgray;
    min-height: 0%;
    max-height: 90%;
    overflow: auto;
    padding: 0; /* 移除容器原有内边距 */
}

table {
    border-collapse: collapse;
    text-align: center;
    width: 100%;
    padding: 25px; /* 将内边距转移到表格上 */
}

方案二：调整表头的top值匹配容器内边距

thead {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 25px; /* 设置为与容器padding-top一致的值 */
    background-color: white;
    z-index: 10;
}

3. 确保表头背景不透明 #

你已经给thead设置了background-color: white，这一步可以保证表头覆盖下方内容时不会透出背景，无需额外修改。

完整修复后的CSS示例 #

.main-body {
    background: lightskyblue;
    height: 80vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.table-container {
    position: absolute;
    background-color: white;
    border-radius: 6px;
    border: 1px solid lightgray;
    min-height: 0%;
    max-height: 90%;
    overflow: auto;
    padding: 0;
}

table {
    border-collapse: collapse;
    text-align: center;
    width: 100%;
    padding: 25px;
}

thead {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
}

thead th {
    padding: 1rem 2rem;
    text-transform: uppercase;
    letter-spacing: normal;
    font-size: 1rem;
}

tbody td {
    padding: 1rem 2rem;
}

修改后滚动表格内容时，表头会稳定固定在顶部，且不会被下方内容覆盖，同时表格内边距也能正常显示。

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