Using display:table-cell without table-row

squarebracket picture squarebracket · Sep 19, 2013 · Viewed 9.1k times · Source

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?

Answer

doitlikejustin picture doitlikejustin · Sep 19, 2013

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.