Sticky td avec l'attribut rowspan dépasse les limites du tableau lors du défilement

Question

J'ai une table avec des en-têtes collants et des td collants avec des étendues de lignes. Lors du défilement, le td et le rowspan apparaissent au-dessus de son en-tête (qui est la première colonne selon cet exemple). La spécification d'un z-index placera l'en-tête au-dessus du td mais chevauchera son texte. Comment puis-je empêcher que cela se produise ? Ma première version n'avait pas de lignes, contenait des cellules vides et se comportait correctement.

* {
  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> -->

Answer 1

Essayez ci-dessous, l'espacement des lignes est incorrect

* {
  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