Почему браузер не может правильно отобразить эту таблицу HTML?

Question

Я борюсь с таблицей HTML. Я понятия не имею, почему этот тег таблицы не работает должным образом в браузере

<table border="1">
  <tbody>
    <tr>
      <td rowspan="2">1-1</td>
      <td rowspan="3">2-1</td>
    </tr>
    <tr>
      <td rowspan="2">1-2</td>
    </tr>
    <tr>
      <td rowspan="3">2-2</td>
    </tr>
    <tr>
      <td rowspan="2">1-3</td>
    </tr>
  </tbody>
</table>

HTML-код, приведенный выше, будет выглядеть так:

Однако вид, который я ожидал увидеть, выглядит следующим образом

Как я понял, если я хочу увидеть, что я хочу в браузере, я должен исправить ряды строк, как это

<table border="1">
  <tbody>
    <tr>
      <td rowspan="1">1-1</td>
      <td rowspan="2">2-1</td>
    </tr>
    <tr>
      <td rowspan="2">1-2</td>
    </tr>
    <tr>
      <td rowspan="2">2-2</td>
    </tr>
    <tr>
      <td rowspan="1">1-3</td>
    </tr>
  </tbody>
</table>

Но мне действительно интересно, что отличается и почему браузер (Chrome) не отображает первый должным образом и делает второй.

Answer 1

Вы уже пробовали flexbox? Это немного другой подход для решения этой проблемы.

#main {
    width: 100px;
    height: 150px;
    border: 1px solid #c3c3c3;
   
   align-items: stretch;
    display: flex;
    flex-flow: column wrap;
   
}

#main div {
    width: 50px;
    height: 50px;
    line-height: 45px;
    text-align: center;
    
  
}

#right {
	width: 50px;
    height: 150px;
}

#right div {
	width: 50px;
    height: 75px;
   
    line-height: 70px;
    text-align: center;
    
    
}

<div id="main">
  <div style="background-color:lightgrey;" >1-1</div>
  <div style="background-color:grey;">1-2</div>
  <div style="background-color:lightgrey;">1-3</div>
<div id="right">
  <div id="right" style="background-color:lightblue;">2-1</div>
  <div id="right" style="background-color:lightgreen;">2-2</div>
</div>
</div>

Answer 2

Согласно W3C, нет способа указать значение с плавающей запятой, например, 1,5 для диапазона строк, но могут помочь некоторые настройки, как показано ниже.

<table border="1">
  <tbody>
    <tr>
      <td rowspan="2">1-1</td>
    </tr>
     <tr>
      <td rowspan="2">1-2</td>
    </tr>
    <tr>
      <td rowspan="2">2-1</td>
    </tr>
    <tr>
      <td rowspan="3">2-2</td>
    </tr>
     <tr>
      <td rowspan="2">3-1</td>
    </tr>
  </tbody>
</table>