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

也就是说，Web 浏览器(最新版本的 Chrome、Firefox 和 IE)绝对不允许第 1 组的右下角和第 2 组的左上角在同一行。相反，中间一排神奇地消失了，并迫使角落对角线相对。

HTML代码:

    <table>        <tr>            <td rowspan="2" colspan="2">Group #1</td>            <td>(0, 1)</td>        </tr>        <tr>            <!-- ROW THAT MAGICALLY DISAPPEARS -->            <td rowspan="2">G#2</td>        </tr>        <tr>            <td>(2, 0)</td>            <td>(2, 1)</td>        </tr>    </table>

有办法解决这个问题吗？

---

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