html - 请解释奇怪的 HTML 表格行跨度行为

Question

考虑以下 HTML 表定义。

<table>
 <tbody>
  <tr>
   <td rowspan='2'>A</td>
   <td>2</td>
   <td rowspan='2'>B</td>
  </tr>
  <tr>
   <td rowspan='2'>C</td>
  </tr>
  <tr>
   <td>1</td>
   <td>3</td>
  </tr>
 </tbody>
</table>

我希望表格看起来像：

+---+---+---+
| A | 2 | B |
|   +---+   |
|   | C |   |
+---+   +---+
| 1 |   | 3 |
+---+---+---+

但在 Firefox、IE8 和 Chrome 中，表格呈现如下：

+---+---+---+
| A | 2 | B |
+---+---+---+
| 1 | C | 3 |
+---+---+---+

如果我在表中添加另一列，如下所示：

<table>
 <tbody>
  <tr>
   <td>a</td>
   <td rowspan='2'>A</td>
   <td>2</td>
   <td rowspan='2'>B</td>
  </tr>
  <tr>
   <td>b</td>
   <td rowspan='2'>C</td>
  </tr>
  <tr>
   <td>c</td>
   <td>1</td>
   <td>3</td>
  </tr>
 </tbody>
</table>

...我得到以下内容，这更像是我想要的。

+---+---+---+---+
| a | A | 2 | B |
+---+   +---+   |
| b |   | C |   |
+---+---+   +---+
| c | 1 |   | 3 |
+---+---+---+---+

问题：

1. 浏览器的行为是否正确？如果是这样，为什么在上面给出的第一个 HTML 段的情况下表格会不直观地折叠？

2. 是否有任何有效的 HTML/css 会强制表格按我的意图显示？

Answer 1

我认为这确实有效......您的单元格高度不是固定的，所以它似乎不起作用。但如果你这样尝试：

<table border="1">
<tr>
    <td height="50px" rowspan="2">A</td>
    <td>2</td>
    <td rowspan="2">B</td>
</tr>
<tr>
    <td rowspan="2">C</td>
</tr>
<tr>
    <td>1</td>>
    <td>3</td>
</tr>
</table>

您会看到该表的行为如您所愿：

_{（来源：myimg.de）}

因此，如果您希望您的表格看起来像您解释的那样，我认为您需要做的就是在 css 中定义单元格高度或像我上面描述的那样。

Answer 2

也许这会有所帮助！我遇到了同样的问题：“行跨度不起作用”。我尝试了 height 属性技巧，但没有帮助。在互联网上搜索了几个小时的另一个技巧后，我注意到我的tr标签没有正确关闭：<tr>...<tr>而不是<tr>...</tr>，并且我的行跨度呈现出预期的效果。