View Full Version : display: table-cell equivalent colspan

05-16-2011, 10:31 AM
Assume I have the following simple HTML:

<div id="Table" style="display: table;">
<div id="Row1" style="display: table-row; height: 100px;">
<div id="Cell1" style="display: table-cell; width: 50%;"></div>
<div id="Cell2" style="display: table-cell; width: 50%;"></div>
<div id="Row2" style="display: table-row; height: 100px;">
<div id="Cell3" style="display: table-cell;"></div>
I need the equivalent of
colspan="2" on Cell3
I mean that I need:
Cell3 width = (Cell1 width + Cell2 width)

05-16-2011, 10:38 AM
Why not just use a table...?

05-16-2011, 11:45 AM
Or why not set cell3’s width to 100%?

05-16-2011, 12:10 PM
There is a column-span CSS3 property. But it is supported only by Opera (at least in theory) and Chrome (-webkit-column-span).

Use a HTML table. Of use CSS float and clear instead of table-cell, table-row.

05-16-2011, 12:11 PM
Or why not set cell3ís width to 100%?
It won't work. It will extend the first cell above, as well.