title: Display: table-cell on new row
body: <p>Here is an example code for what I mean:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="table"&gt;
    &lt;li class="table-cell"&gt;&lt;/li&gt;
    &lt;li class="table-cell"&gt;&lt;/li&gt;
    &lt;li class="table-cell"&gt;&lt;/li&gt;
    &lt;li class="table-cell"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.table {
    display: table;
  }
  
  .table-cell {
    display: table-cell;
    width: 25%;
  }
  </code></pre>
  
  <p>Q: How can I make the third and forth <code>&lt;li&gt;</code> (table cells) display on new row with width: 50% each?</p>
  
  <p>Q: Is there a way using only CSS and not jQuery or Javascript?</p>