HTML表格显示答案

【问题标题】：HTML table displayHTML表格显示
【发布时间】：2017-05-18 21:04:08
【问题描述】：

这就是我想要的：

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

所以我写了下面的代码来实现我的目标：

<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 中显示如下：

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

我找不到我的错，我该怎么办？任何帮助将不胜感激！

【问题讨论】：

Firefox rowspan problem的可能重复
给列内的空白
你使用的是哪个版本的FF...
FF 版本 17.0.1，IE9 也不起作用。 IE6 变差了……
添加也不行。

标签： html firefox html-table

【解决方案1】：

这不是 Firefox `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/

【讨论】：

@Darkylin 添加了另一种方法。一探究竟。 :)
添加CSS规则也可以纠正这个错误~无论如何，非常感谢！！

【解决方案2】：

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

tr { height: 1.3em; }

【讨论】：

这是正确答案。当它被提交时，我正在编写演示：before 和 after。
@Barney 还是谢谢你们！

这不是 Firefox rowspan 的问题。

小提琴：http://jsfiddle.net/sK6GG/

另一种完美的方法：

小提琴：http://jsfiddle.net/QvP77/

这不是 Firefox `rowspan` 的问题。