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?

Katherinakatherine

possible duplicate of Using display:table-cell without containing display:table – Horsefly

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.

Goddart

I dont think this answers the OP's question. Where in this documentation does it say that you dont need a containing display:table-row ? HTML tables markup has always needed at least TABLE -> TR -> TD. I have had problems in the past because of a missing display:table-row container, but I have not seen it for about a year now. I wonder if modern browsers now allow you to have just a display:table with a display:table-cell. Also, if the tr is now inferred automatically as an anonymous element, it would also be good to know whether you can just use a display:table-cell element on it's own. – Lysol

Using display:table-cell without containing display:table has a link to the doc, which says: "For each 'table-cell' box C in a sequence of consecutive internal table and 'table-caption' siblings, if C's parent is not a 'table-row' then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are 'table-cell' boxes." – Articulate

HTML may require TABLE -> TR -> TD if you are using actual table elements, but if you are just using css display values on divs, it may be different, because now we are outside the realm of HTML and in the realm of CSS. – Gillan

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.

Supplicatory