HTML table staggered cell merging

Question

>> JSFIDDLE demonstration of the question <<

---

Starting with an HTML table like the following:

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

I would like to make 2 staggered groups of merged cells so that it looks like the following:

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

The problem I run into is when I try to make an HTML table with this layout, the middle row disappears:

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

That is, the web browser (latest versions of Chrome, Firefox, and IE) absolutely refuses to allow the LOWER-RIGHT corner of Group #1 and the TOP-LEFT corner of Group #2 to be in the same row. Instead, the middle row magically disappears and forces the corners to be diagonally opposite.

HTML code:

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

Is there a way to fix this?

---

>> JSFIDDLE demonstration of the question <<

Answer 1

I'm not sure I can explain the finer details of why this happens, except that the table collapses the row since there's nothing on the row that requires a height greater than zero.

To fix it, you can just add a hidden element to the rows, which will keep the row at normal height (here done with a style tag for illustration, but you'd of course do it using a css class)

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