I am facing an issue with a table that has both a sticky header and sticky td elements with rowspan. When I scroll, the td with rowspan appears on top of its header, which in this case is the first column. Setting a z-index property puts the header on top of the td but overlaps its text. How can I prevent this from happening? In a previous version without rowspan, with empty cells, everything worked 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>
<!-- Additional rows ommitted for brevity -->
</table>
<!-- </div> -->