display: table
content
display: table-cell
content
display: table containing table-cell
display: table, with a box inside having background, padding, border, margin
content
other content other content
display: table-cell, with a box inside having background, padding, border, margin
content
other content other content
display: table containing table-cell, with a box inside having background, padding, border, margin
content
other content other content
display: table, with a box inside having background, padding, border, margin and float:left
content
other content other content
this follows the table
like the above but the inner box is not the first child of the table (text before)
before the blue bordered box
content
after other content other content
like the above but the inner box is not the first child of the table (empty unstyled span before)
content
other content other content
display: table, with a box inside having background, padding, border, margin and width:300px
content
other content other content
display: table-cell, with a box inside having background, padding, border, margin and float:left
content
other content other content
display table containing display: table-cell, with a box inside having background, padding, border, margin and float:left
content
other content other content
display table containing display: table-cell, with a box inside having background, padding, border, margin and width:300px
content
other content other content
IE8 beta 1 notes:
- When a box with display:table has a first child which is not a box with display:table-cell (or table-row wrapping table-cell, ...), then the anonymous table-cell which is created 'inherits' all (?) properties of the inner block (margin, padding, background, width, ...)
- If a table cell contain a box with specified width and horizontal padding (and/or border) then the cell gets some unnecessary horizontal space (at the right of the box), equal to the sum of horizontal padding and border of the box. This happens with html tables as well (not only with display:table* boxes) IE8b1: extra space in table cells caused by padding and border on inner box.
CSS tests home