Question

In a sample web application I have to work on, I noticed that some elements had a display: table-cell style but their parent don’t have display: table-row.

To me thats seems wrong, but I’m not sure at all.

Hence this question: Is this a valid construct ? What problems can it cause, if any ?

Thank you.

Here is an example of what I meant:

<div style="display: block">
  <div style="display:table-cell">
    <p>Some content</p>
  </div>
</div>

Answer 1

I’m kind of parroting Faust who was kind enough to find the specs (but seems to have now removed his answer)…

Yes, it is (probably) valid.

Document languages other than HTML may not contain all the elements 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.

From 17.2.1 Anonymous table objects,
http://www.w3.org/Style/css2-updates/css2/tables.html#anonymous-boxes

This could be read as anonymous boxes will be created in non-HTML languages that don’t have the right construct but I would assume that it will generate anonymous table objects in HTML as well.