Display: table-cell on new row

Question

Here is an example code for what I mean:

HTML

<ul class="table">
  <li class="table-cell"></li>
  <li class="table-cell"></li>
  <li class="table-cell"></li>
  <li class="table-cell"></li>
</ul>

CSS:

.table {
  display: table;
}

.table-cell {
  display: table-cell;
  width: 25%;
}

Q: How can I make the third and forth <li> (table cells) display on new row with width: 50% each?

Q: Is there a way using only CSS and not jQuery or Javascript?

Answer 1

The simple answer is: you can't, at least not with lists. Adjacent elements with their display set to table-cell are treated as belonging to the same row (even if a row element is not provided, an anonymous one will be created for you). Since lists aren't allowed to contain any other tags between the ul and the li, this simply isn't possible with lists. You'll have to use either different markup or different styling.

Here are your options if you don't want to modify the markup.

Inline-block on the list items: http://jsfiddle.net/XNq74/1/

li {
    display: inline-block; /* could use floats here instead */
    width: 40%;
}

CSS columns would be a reasonable choice: http://jsfiddle.net/XNq74/

ul {
    columns: 2;
}

http://caniuse.com/#feat=multicolumn

Flexbox would also work and can be used in combination with inline-block: http://jsfiddle.net/XNq74/2/

ul {
    display: flex;
    flex-flow: row wrap;
}

li {
    flex: 1 1 40%;
}

http://caniuse.com/#search=flexbox