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