为什么浏览器无法正确呈现此 table HTML？

Question

我正在与 TABLE HTML 作斗争。我不知道为什么这个 table 标签在浏览器中不能正常工作

<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，无法为 rowspan 指定像 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>

为什么浏览器无法正确呈现此 table HTML？

Why can't the browser render this table HTML properly?

html

markup

html-table