Impossibile eseguire la tabella HTML

Question

Devo fare la seguente tabella in HTML, troppo facile:

Il problema è nella seconda riga, la seconda colonna ha solo una riga, non due, nel codice è rowspan = "2". Perché il mio codice non funziona, è semplice da fare, non capisco questo problema, davvero ...

Quello che segue è il codice pertinente:

table {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}

<table>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td rowspan="2" colspan="3">X</td>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
</table>

Answer 1

Ho appena risposto a una domanda molto simile qui pochi giorni fa. Apparentemente, se nessuna delle colonne contiene l'intera quantità di righe previste e il contenuto della cella lo consente, i browser "comprimono" il contenuto in meno righe (che IMO è un bug o almeno, un'interpretazione errata, ma beh ...).

Non appena si aggiungono più contenuti nelle vostre cellule (almeno in quelli che fanno fare la differenza), il layout desiderato è reso, con altezza secondo il contenuto della cella:

table {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}

<table>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td rowspan="2" colspan="3">some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here</td>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
</table>

In alternativa, puoi aggiungere un'altezza fissa a una o alcune celle per rendere visibile il layout desiderato, anche se non hanno lo stesso contenuto:

table {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}

<table>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td rowspan="2" colspan="3" style="height: 80px;">X</td>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
</table>