我有一个带有粘性标题和粘性 tds 的表格，其中有行跨度。 当它滚动时，td 和 rowspan 出现在它的标题顶部（根据这个例子，它是第一列）。 指定 z-index 会将标头置于 td 顶部，但与其文本重叠。 我怎样才能防止这种情况发生？ 我的第一个版本没有行跨度，包含空单元格并且行为正确。
1
1103* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/*
.wrapper {
overflow: auto;
height: 20rem;
}
*/
table {
display: block;
overflow: auto;
height: 20rem;
border-collapse: separate;
border-spacing: 0;
}
thead {
position: sticky;
top: 0;
background-color: #333;
color: #fff;
/* z-index: 100; */
}
thead th {
border: 0.1rem solid #ddd;
}
tbody tr:nth-child(even) {
background-color: #ddd;
}
tbody td {
padding: 0 0.5rem;
}
tbody td[rowspan] {
border-top: 0.1rem solid #999;
vertical-align: top;
position: sticky;
top: 1.4rem;
background-color: #fff;
/* z-index: 10; */
}
| col1 | col2 | col3 | col4 | col5 |
|---|---|---|---|---|
| cell_text_1 | cell_text | cell_text | cell_text | cell_text |
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | cell_text | |
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | cell_text | |
| cell_text | cell_text | cell_text | ||
| cell_text_2 | cell_text | cell_text | cell_text | cell_text |
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | cell_text | |
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text_3 | cell_text | cell_text | cell_text | cell_text |
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | cell_text | |
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | cell_text | |
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text_4 | cell_text | cell_text | cell_text | cell_text |
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | cell_text | |
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text | ||
| cell_text | cell_text | cell_text |
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
尝试下面，行距错误
* { padding: 0; margin: 0; box-sizing: border-box; } /* .wrapper { overflow: auto; height: 20rem; } */ table { display: block; overflow: auto; height: 20rem; border-collapse: separate; border-spacing: 0; } thead { position: sticky; top: 0; background-color: #333; color: #fff; z-index: 100; } thead th { border: 0.1rem solid #ddd; } tbody tr:nth-child(even) { background-color: #ddd; } tbody td { padding: 0 0.5rem; } tbody td[rowspan] { border-top: 0.1rem solid #999; vertical-align: top; position: sticky; top: 1.4rem; background-color: #fff; /* z-index: 10; */ }