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.

<tablewidth="100%"border="1"><colgroup><col><col><col><col><colstyle="width: 1px;"></colgroup><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><tdcolspan="2"rowspan="2">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><tdcolspan="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:

<tablewidth="100%"border="1"><colgroup><col><col><col><col><colstyle="width: 1px;"></colgroup><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><tdstyle="display: none;">&nbsp;</td></tr><tr><tdcolspan="2"rowspan="2">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><tdstyle="display: none;">&nbsp;</td></tr><tr><tdcolspan="2"rowspan="2">&nbsp;</td><tdstyle="display: block; width: 0px; visibility: hidden; border: 0;">&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><tdstyle="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; }