Using display:table-cell without table-row

Question

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 1

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.

Answer 2

From Everything You Know About CSS Is Wrong :

Anonymous Table Elements

CSS tables happily abide by the normal rules of table layout, which enables an ex­tremely powerful feature of CSS table layouts: missing table elements are created anonymously by the browser. The CSS2.1 specification states:

Document languages other than HTML may not contain all the ele­ments in the CSS 2.1 table model. In these cases, the “missing” elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a “table”/“inline-table” element, a “table-row” element, and a “table-cell” element.

What this means is that if we use display: table-cell; without first containing the cell in a block set to display: table-row;, the row will be implied—the browser will act as though the declared row is actually there.

So no, there's nothing wrong with using display:table-cell without containing display:table-row. The CSS it produces is perfectly valid and has some very interesting use cases. For more info on using anonymous table Elements, see the article I'm quoting from.

---

Note :

The fact that it produces valid CSS doesn't mean that the behavior of display:table-cell without display:table-row or display:table-row is stable. Even today (February 2016), the behavior of anoymous table elements remain inconsistent across browsers. See Inconsistent behavior of display: table and display: table-cell for more details.