为什么浏览器不能正确地呈现这个表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

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

你试过柔韧盒了吗？解决这个问题的方法有点不同。

​

#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>

​