html - HTMLテーブル表示

Question

これが私が欲しいものです：</ p>

+-----+-----+-----+-----+
|     |     |     |     |
|     |     |     |     |
+-----+-----+-----+-----+
|           |     |     |
|           |     |     |
+           +-----+-----+
|           |           |
|           |           |
+-----+-----+           +
|     |     |           |
|     |     |           |
+-----+-----+-----+-----+

だから私は私の目標を達成するために以下のコードを書きました：

<table>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

しかし、それは機能しませんでした。Firefoxでは次のように表示されます。

+-----+-----+-----+-----+
|     |     |     |     |
|     |     |     |     |
+-----+-----+-----+-----+
|           |     |     |
|           |     |     |
+-----+-----+-----+-----+
|     |     |           |
|     |     |           |
+-----+-----+-----+-----+

自分のせいが見つかりません。どうすればよいですか。どんな助けでもありがたいです！</ p>

Answer 1

これはFirefoxのrowspan問題ではありません。

デフォルトでは、行数が同じであるため、HTMLは処理できる位置にありませんが、マージは異なります。1つのハックは、を使用し<col>て、偽の列を与えて非表示にすることです。

<table width="100%" border="1">
    <colgroup>
        <col>
        <col>
        <col>
        <col>
        <col style="width: 1px;">
    </colgroup>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>​

を与えcolgroupて最後colを隠すことで十分です。

フィドル： http： //jsfiddle.net/sK6GG/

---

別の完璧なアプローチ：

<table width="100%" border="1">
    <colgroup>
        <col>
        <col>
        <col>
        <col>
        <col style="width: 1px;">
    </colgroup>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td style="display: none;">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td style="display: none;">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">&nbsp;</td>
        <td style="display: block; width: 0px; visibility: hidden; border: 0;">&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td style="display: none;">&nbsp;</td>
    </tr>
</table>​

フィドル： http： //jsfiddle.net/QvP77/

Answer 2

3列目に最小の高さを必要とするものは何もありません。CSSルールでそのような要件を追加します。

tr { height: 1.3em; }