浏览器为什么不能正确呈现此表HTML？

Question

我正在使用TABLE 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

根据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>

Answer 2

您是否尝试过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>