我有一個帶有黏性標題和黏性 tds 的表格，其中有行跨度。 當它滾動時，td 和 rowspan 出現在它的標題頂部（根據這個例子，它是第一列）。 指定 z-index 會將標頭置於 td 頂部，但與其文字重疊。 我怎樣才能防止這種情況發生？ 我的第一個版本沒有行跨度，包含空白單元格並且行為正確。
* {
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; */
}
<!-- <div class="wrapper"> -->
<table>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="10">cell_text_1</td>
<td rowspan="4">cell_text</td>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="4">cell_text</td>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="2">cell_text</td>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="10">cell_text_2</td>
<td rowspan="5">cell_text</td>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="5">cell_text</td>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="18">cell_text_3</td>
<td rowspan="6">cell_text</td>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="7">cell_text</td>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="5">cell_text</td>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="12">cell_text_4</td>
<td rowspan="6">cell_text</td>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="6">cell_text</td>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
<tr>
<td rowspan="">cell_text</td>
<td>cell_text</td>
<td>cell_text</td>
</tr>
</tbody>
</table>
<!-- </div> -->
嘗試下面，行距錯誤
* { 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; */ }