Search code examples
csscss-tables

Can I start new row of CSS table cells without a row wrapper element?

Given markup like this:

<div class="a">A</div>
<div class="b">B</div>
<div class="a">A</div>
<div class="b">B</div>
<div class="a">A</div>
<div class="b">B</div>

Is it possible to style this document to look like this:

|-------|---------|
|       |         |
|   A   |    B    |
|       |         |
|-------|---------|
|       |         |
|   A   |    B    |
|       |         |
|-------|---------|
|       |         |
|   A   |    B    |
|       |         |
|-------|---------|

(and if the content in A or B is longer, its neighbor will grow to match its height)…

without any additional markup?

I understand that giving .a and .b a display value of table-cell would just make this one big row.

What’s the solution?

Solution

  • Not without flexbox, which hasn’t landed in several major browsers yet, seems to be the consensus.