HTML table display

Question

This is what I want：

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

So I wrote the code below to achieve my goal:

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

But it didn't work,it display like this in Firefox:

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

I don't find my fault, what should I do? Any help will be appreciate！

possible duplicate of [Firefox rowspan problem](http://stackoverflow.com/questions/7232337/firefox-rowspan-problem) — Veger, Dec 31 '12 at 08:21
FF version 17.0.1, IE9 dosen't work either. IE6 get worse... — Darkylin, Dec 31 '12 at 08:26

Praveen Kumar Purushothaman · Answer 1 · 2012-12-31T08:42:32.570

This is not a firefox `rowspan` problem.

By default, the HTML is not in a position to handle because of equal number of rows, but different merges. One hack would be, using <col>, giving a fake column and hiding.

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

Giving a colgroup and hiding the last col will do.

Fiddle: http://jsfiddle.net/sK6GG/

Another perfect approach:

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

Fiddle: http://jsfiddle.net/QvP77/

add CSS rules could also correct this error~ Anyway,thanks a lot!! — Darkylin, Dec 31 '12 at 08:45

score 0 · Accepted Answer · answered Dec 31 '12 at 08:36

0

There is nothing that requires any minimum height for the third row. Add such a requirement with a CSS rule, e.g.

tr { height: 1.3em; }

answered Dec 31 '12 at 08:36

Jukka K. Korpela

195,524
37
270
390

This is the correct answer. While it was being submitted I was off writing the demo: [before](http://jsfiddle.net/barney/ZBC6d/) and [after](http://jsfiddle.net/barney/ZBC6d/2/). – Barney Dec 31 '12 at 08:40

HTML table display

2 Answers2

This is not a firefox `rowspan` problem.

Fiddle: http://jsfiddle.net/sK6GG/

Another perfect approach:

Fiddle: http://jsfiddle.net/QvP77/

Linked

HTML table display

2 Answers2

This is not a firefox rowspan problem.

Fiddle: http://jsfiddle.net/sK6GG/

Another perfect approach:

Fiddle: http://jsfiddle.net/QvP77/

Linked

This is not a firefox `rowspan` problem.