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