I have a table with sticky headers and sticky tds with row spans in it. When it scrolls, the td and rowspan appear on top of its header (which is the first column according to this example). Specifying a z-index will place the header on top of the td but overlap its text. How can I prevent this from happening? My first version had no row spans, contained empty cells and behaved correctly.
* {
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> -->
P粉7247375112024-03-22 00:48:40
Try the following, the line spacing is wrong
* {
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 | ||
| cell_text_5 | 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 |