How to get a table-cell aligned to the right?
alignment, css, css-tables
Solution
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;
}
http://jsfiddle.net/7H7rf/6/
Problem
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; } ``` jsFiddle. I've tried margins & floats. I would like to avoid absolute and floats if possible though.