I have a table with two rows.
Looks something like this:
—————————————————
| 1 | 2 |
|———————————————|
| 3 | |
—————————————————
The first row has two cells, but the second has only one.
How can I get the only table-cell in the second row, to align under the the second table-cell in the first row? (without adding a cell before the cell in the second row)
Like this:
—————————————————
| 1 | 2 |
|———————————————|
| | 3 |
—————————————————
Here's my HTML:
<div class="table">
<div class="row">
<div class="cell one">
1
</div>
<div class="cell two">
2
</div>
</div>
<div class="row">
<div class="cell three">
3
</div>
</div>
</div>
And my CSS:
div.table {
display:table;
background:#EEE;
padding:10px;
}
div.row {
display:table-row;
background:#610;
padding:10px;
width:100%;
text-align:right;
}
div.cell {
display:table-cell;
background:#016;
padding:10px;
color:white;
font-family:sans-serif;
}
I've tried margins & floats. I would like to avoid absolute and floats if possible though.
If the only reason you don't want an extra cell because you don't have control of the HTML, you could do this:
.row + .row:before {
content: '';
display:table-cell;
background-color:white;
}