HTML表格交错单元格合并

Question

>>JSFIDDLE demonstration的问题

---

从 HTML 表格开始，如下所示：

+------------+------------+------------+
|            |            |            |
|   (0, 0)   |   (0, 1)   |   (0, 2)   |
|            |            |            |
+------------+------------+------------+
|            |            |            |
|   (1, 0)   |   (1, 1)   |   (1, 2)   |
|            |            |            |
+------------+------------+------------+
|            |            |            |
|   (2, 0)   |   (2, 1)   |   (2, 2)   |
|            |            |            |
+------------+------------+------------+

我想制作 2 组交错的合并单元格，使其如下所示：

+------------+------------+------------+
|                         |            |
|                         |   (0, 2)   |
|       Merged cell       |            |
+        Group #1         +------------+
|                         |            |
|                         |    G       |
|                         |    r       |
+------------+------------+    o  #2   +
|            |            |    u       |
|   (2, 0)   |   (2, 1)   |    p       |
|            |            |            |
+------------+------------+------------+

我遇到的问题是，当我尝试使用这种布局制作 HTML 表格时，中间行消失了：

+------------+------------+------------+
|                         |            |
|       Group #1          |   (0, 2)   |
|                         |            |
+-------------------------+------------+
|            |            |    Group   |
|   (2, 0)   |   (2, 1)   |     #2     |
|            |            |            |
+------------+------------+------------+

也就是说，网络浏览器（最新版本的 Chrome、Firefox 和 IE）绝对不允许第 1 组的右下角和第 2 组的左上角在同一行。取而代之的是，中间一排神奇地消失了，并迫使角对角线对面。

HTML 代码：

组#1 (0, 1) G#2 (2, 0) (2, 1)

有没有办法解决这个问题？

---

>>JSFIDDLE demonstration的问题

Answer 1

我不确定我能否更详细地解释为什么会发生这种情况，除了表格折叠了行，因为行上没有任何东西需要高度大于零。

要修复它，您可以在行中添加一个隐藏元素，这将使行保持在正常高度（这里使用样式标签进行说明，但您当然可以使用 css 类）

<table>
    <tr>
        <td rowspan="2" colspan="2">Group #1</td>
        <td>(0, 1)</td>
        <td style="visibility:hidden;border-style:none;">&nbsp;</td>
    </tr>
    <tr>
        <!-- MAGICROW -->
        <td rowspan="2">G#2</td>
        <td style="visibility:hidden;border-style:none;">&nbsp;</td>
    </tr>
    <tr>
        <td>(2, 0)</td>
        <td>(2, 1)</td>
        <td style="visibility:hidden;border-style:none;">&nbsp;</td>
    </tr>
</table>

A JSfiddle to test with.