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

这不是火狐的rowspan问题。

默认情况下，由于行数相同，但合并不同，HTML 无法处理。一种技巧是，使用<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

第三行没有任何最小高度要求。使用 CSS 规则添加这样的要求，例如

tr { height: 1.3em; }