Different number of columns for each row - html

Question

I'm not using the tag, so I can't use the colspan attribute.
I'd like to create a table with three cells in the first row, one cell in the last row and two cells in the other rows.
Here's my code (minimal):
.row {
display: table-row;
}
.cell {
display: table-cell;
}
HTML:
<div style="display: table;">
<div class="row" style="width: 100%;">
<div class="cell" style="width: 33% !important;">
aaaa
</div>
<div class="cell" style="width: 33% !important;">
bbbbb
</div>
<div class="cell" style="width: 33% !important;">
ccccc
</div>
</div>
<div class="row" style="width: 100%;">
<div class="cell" style="width: 50% !important;">
ddddd
</div>
<div class="cell" style="width: 50% !important;">
eeeee
</div>
</div>
<div class="row" style="width: 100%;">
<div class="cell" style="width: 50% !important;">
fffff
</div>
<div class="cell" style="width: 50% !important;">
ggggg
</div>
</div>
<div class="row" style="width: 100%;">
<div class="cell" style="width: 100% !important;">
last cell
</div>
</div>
</div>
And this is what I get (I can't post images): http://gyazo.com/cc036ed406f6c1a166955522d40e05b0.png

Answer 1

I would build this layout as follows.
For the HTML:
<div class="parent">
<div class="row r3">
<div class="cell">aaaa</div>
<div class="cell">bbbbb</div>
<div class="cell">ccccc</div>
</div>
<div class="row r2">
<div class="cell">ddddd</div>
<div class="cell">eeeee</div>
</div>
<div class="row r2">
<div class="cell">fffff</div>
<div class="cell">ggggg</div>
</div>
<div class="row r1">
<div class="cell">last cell</div>
</div>
</div>
and apply the following CSS:
.row {
display: table;
border: 1px dashed blue;
width: 100%
}
.cell {
display: table-cell;
border: 1px dotted blue;
}
.r3 .cell {
width: 33.333333%;
}
.r2 .cell {
width: 50%;
}
.r1 .cell {
width: 100%;
}
Use display: table for each div.row block element with 100% width.
You don't need to explicitly define a CSS table row, one will be created anonymously as needed.
See reference: http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes
See demo: http://jsfiddle.net/audetwebdesign/72yb5th2/

Answer 2

You're trying to emulate a table with divs. Why? The <table> tag is made for exactly this kind of tabular data.