Sticky td dengan atribut rowspan melebihi had jadual apabila menatal

Question

Saya mempunyai meja dengan pengepala melekit dan td melekit dengan rentang baris di dalamnya. Apabila ia menatal, td dan rentang baris muncul di atas pengepalanya (iaitu lajur pertama mengikut contoh ini). Menentukan indeks-z akan meletakkan pengepala di atas td tetapi bertindih dengan teksnya. Bagaimanakah saya boleh mengelakkan perkara ini daripada berlaku? Versi pertama saya tidak mempunyai rentang baris, mengandungi sel kosong dan berkelakuan dengan betul.

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

Cuba di bawah, jarak baris salah

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