title: CSS Display table add space between separating border
body: <p>In a markup with <code>display: table</code> I'd like to separate some rows with a dividing line.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table { 
    display: table;
    width: 100%;
    border-collapse: collapse;
  }
  .table-row {display: table-row; }
  .table-cell {display: table-cell; width: 50%}
  .border-between {border-top:1px solid;}
  .padding-t {padding-top: .5rem}
  .padding-b {padding-bottom: .5rem}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="table"&gt;
    &lt;div class="table-row"&gt;
      &lt;div class="table-cell"&gt;1&lt;/div&gt;
      &lt;div class="table-cell"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="table-row"&gt;
      &lt;div class="table-cell"&gt;2&lt;/div&gt;
      &lt;div class="table-cell padding-b"&gt;2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="table-row border-between"&gt;
      &lt;div class="table-cell padding-t"&gt;3&lt;/div&gt;
      &lt;div class="table-cell"&gt;3&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="table-row"&gt;
      &lt;div class="table-cell"&gt;4&lt;/div&gt;
      &lt;div class="table-cell"&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="table-row  border-between"&gt;
      &lt;div class="table-cell"&gt;5&lt;/div&gt;
      &lt;div class="table-cell"&gt;5&lt;/div&gt;
    &lt;/div&gt;
     &lt;div class="table-row"&gt;
      &lt;div class="table-cell"&gt;6&lt;/div&gt;
      &lt;div class="table-cell"&gt;6&lt;/div&gt;
    &lt;/div&gt;
     &lt;div class="table-row"&gt;
      &lt;div class="table-cell"&gt;7&lt;/div&gt;
      &lt;div class="table-cell"&gt;7&lt;/div&gt;
    &lt;/div&gt;
     &lt;div class="table-row"&gt;
      &lt;div class="table-cell"&gt;8&lt;/div&gt;
      &lt;div class="table-cell"&gt;8&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>While this works without problem when setting <code>border-collapse: collapse;</code> I'm looking for a nice and clean way to add some vertical space before and after the line as I did in my example between line 2 and 3. I would favor a solution without adding extra markup and modifying some cells for providing padding. Thanks for pushing me into the right direction!</p>