Sticky td with rowspan attribute exceeds table bounds when scrolling

Question

I have a table with sticky headers and sticky tds with row spans in it. When it scrolls, the td and rowspan appear on top of its header (which is the first column according to this example). Specifying a z-index will place the header on top of the td but overlap its text. How can I prevent this from happening? My first version had no row spans, contained empty cells and behaved 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>
    <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

Try the following, the line spacing is wrong

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