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

您将需要使用colgroupandcol标记来定义列的宽度,而不是td直接定义 s ..

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