htmlcsscss-tablestablerowtablecell

Using display:table-cell without table-row

I recently noticed that it is possible to use display: table-cell; on an element without surrounding it with an element using display: table-row;

Example (working in IE, Chrome, FF, Safari, Opera):

<div style="display: table;">
    <div style="display: table-cell;">
        Text
    </div>
</div>

Is this considered bad style? Should the table-cell be surrounded by a table-row or is it not necessary?

Solution

  • No. It does not need to be used with display: table-row. Read here.

    table-cell just represents a <td> or <th>:

    Specifies that an element represents a table cell.

    And specifically regarding table-cell:

    For example, an image that is set to 'display: table-cell' will fill the available cell space, and its dimensions might contribute towards the table sizing algorithms, as with an ordinary cell.