Question

Is it okay to have display: table; on the container element, and display: table-cell; on its children, or should there be a wrapper with display: table-row; in-between?

I mean…

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

or

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

display: table-row; makes sense when you have multiple rows. But in my case, I am only using it for a multi-column responsive layout (which implies single row, obviously) as it’s less complex than using float or something else.

So, the question is, for a single-row multi-column layout, is it okay to have display: table; on the container element, and display: table-cell; on its children, without a display: table-row; wrapper in between?

I’ve seen some sites do this (i.e. they don’t use display: table-row;). Here’s an example.

Answer 1

A single anonymous table row box will be generated within your outer div (the table) to contain all the inner divs (the table cells), so it’s perfectly acceptable if you know you want all the table cells to belong in the same row.