HTML Table Rowspan not working as expected

In this six and first both taking 2 rowspan still six is only taking one row and seven also taking only one row despite I've written rowspan 2, due to this first and six is differing because first working fine while six not.

table { border-collapse: collapse }
td, th { border: solid thin black }

<table>
  <tr>
    <td rowspan="2">first</td>
    <td rowspan="4" colspan="9">second</td>
    <td colspan="3">third</td>
  </tr>
  <tr>
    <td colspan="2">four</td>
    <td>five</td>
  </tr>
  <tr>
    <td rowspan="2">
      six
    </td>
    <td colspan="3" rowspan="2">
      seven
    </td>
  </tr>
</table>

Solution

If all the td elements in a row have rowspan more than 1, then the height of the spanned rows which doesn't have a td with rowspan=1 will be zero. You can verify this in the below snippets:

In this table, the height of the first row is zero, because all the td elements in the first row have rowspan more than 1.

<table border="1">
  <tr>
    <td rowspan="3">first</td>
    <td rowspan="3">second</td>
    <td rowspan="3">third</td>
  </tr>
  <tr>
    <td>four</td>
    <td>five</td>
    <td>six</td>
  </tr>
  <tr>
    <td>seven</td>
    <td>eight</td>
    <td>nine</td>
  </tr>
</table>

In this table, both first and second rows have a height zero, because the all the td elements in the first and second rows have a rowspan more than 1.

<table border="1">
  <tr>
    <td rowspan="3">first</td>
    <td rowspan="3">second</td>
    <td rowspan="3">third</td>
  </tr>
  <tr>
    <td rowspan="2">four</td>
    <td rowspan="2">five</td>
    <td rowspan="2">six</td>
  </tr>
  <tr>
    <td>seven</td>
    <td>eight</td>
    <td>nine</td>
  </tr>
</table>

It is the same case in the snippet given in the question. Check the snippet below. I added an extra row, but still the cells six and seven does not appear to span two rows. This is because the third row has a height zero. Try adding a td element with rowspan=1 to the third row by clicking on the buttons, then you will notice that the cells six and seven are expanding to two rows.

document.getElementById('add-column').addEventListener('click', () => {
    let td = document.createElement('td')
  td.append('eight')
    document.getElementsByTagName('tr')[2].appendChild(td)
  
  calculateHeight()
})

document.getElementById('remove-column').addEventListener('click', () => {
    document.getElementsByTagName('tr')[2]
                .getElementsByTagName('td')[2]
          ?.remove()
          
  calculateHeight()
})

const calculateHeight = () => {
    let height = document.getElementsByTagName('tr')[2].getBoundingClientRect().height;
  
  document.getElementById('height')
                .innerText = Math.round(height)
}

calculateHeight()

<table border="1">
  <tr>
    <td rowspan="2">first</td>
    <td rowspan="4" colspan="9">second</td>
    <td colspan="3">third</td>
  </tr>
  <tr>
    <td colspan="2">four</td>
    <td>five</td>
  </tr>
  <tr>
    <td rowspan="2">
      six
    </td>
    <td colspan="3" rowspan="2">
      seven
    </td>
  </tr>
  <tr>
    <td>nine</td>
    <td>ten</td>
    <td>eleven</td>
    <td>twelve</td>
  </tr>
</table>

<br>

<p>
Height of the third row: <span id="height"></span>
</p>

<br>

<button id="add-column">
Add column without rowspan = 1
</button>

<button id="remove-column">
Remove column without rowspan = 1
</button>