1

今回はこんな表を描いてみました。

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

目標を達成するために、次のような html コードを作成しました。

<table id="table">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td colspan="2" rowspan="2">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

以下のようなスタイルシートを使用した前の質問:

td {
width: 20px;
height: 20px;
border: solid 1px #000;
}
tr {
height: 1.3em;
}

今回は、次のように表示されます：</p> 

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

今何ができますか？どんな解決策でも大歓迎です。

4

1 に答える 1

1

s を直接ではなく、列の幅を定義するには タグcolgroupとタグを使用する必要があります。coltd

td {
    height: 20px;
    border: solid 1px #000;
}
tr {
    height: 1.3em;
}

と

<table id="table">
    <colgroup>
        <col style="width: 22px;"/>
        <col style="width: 22px;"/>
        <col style="width: 22px;"/>
        <col style="width: 22px;"/>
    </colgroup>
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td colspan="2" rowspan="2">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

http://jsfiddle.net/gaby/wvGNn/1/のデモ

于 2012-12-31T12:23:27.707 に答える