html - 为什么浏览器无法正确呈现此表格 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，无法为 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>