3

>> JSFIDDLE 演示问题<<

从 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 代码：

    <表格>
        <tr>
            <td rowspan="2" colspan="2">组#1</td>
            <td>(0, 1)</td>
        </tr>
        <tr>
            <!-- 神奇地消失的行 -->
            <td rowspan="2">G#2</td>
        </tr>
        <tr>
            <td>(2, 0)</td>
            <td>(2, 1)</td>
        </tr>
    </table>

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

>> JSFIDDLE 演示问题<<

4

1 回答 1

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>

一个用于测试的 JSfiddle。

于 2013-07-07T20:01:48.570 回答