HTML Table Display

This is what I want： +-----+-----+-----+-----+ | | | | | | | | | | +-----+-----+-----+-----+ | | | | | | | | +

Solution 1:

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/

Solution 2:

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