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

つまり、Web ブラウザー (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>
    </表>

これを修正する方法はありますか？

>>質問の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 に答える