title: Different border spacing for different rows
body: <p><strong>Synopsis:</strong> I need to display a table like the one below:</p>
  
  <p><img src="https://i.stack.imgur.com/cajWn.png" alt="table with different spacing between head and body"></p>
  
  <p><strong>Necessities:</strong></p>
  
  <ul>
  <li>Semantic HTML coding</li>
  <li>No scripting </li>
  </ul>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th colspan=2&gt;
              One
          &lt;/th&gt;
          &lt;th colspan=2&gt;
              Two
          &lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;
              One
          &lt;/td&gt;
          &lt;td&gt;
              Two
          &lt;/td&gt;
          &lt;td&gt;
              Three
          &lt;/td&gt;
          &lt;td&gt;
              Four
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              One
          &lt;/td&gt;
          &lt;td&gt;
              Two
          &lt;/td&gt;
          &lt;td&gt;
              Three
          &lt;/td&gt;
          &lt;td&gt;
              Four
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>First attempt:</strong></p>
  
  <p><em>"border-collapse attribute"</em></p>
  
  <p>I tried <code>border-collapse: separate;</code> on <code>thead</code> and <code>border-collapse: collapse;</code> on <code>tbody</code> but that simply didn't work.</p>
  
  <pre><code>table {
      border-collapse: collapse;
      border-spacing: 1em;
  }
  
  table thead {
      border-collapse: separate;
  }
  
  table tbody tr {
      border-bottom: 1px solid black;
  }
  
  table thead tr th{
      border-bottom: 1px solid black;
      padding: 10px;
      text-align: center;
  }
  
  table tbody tr td {
      border-bottom: 1px solid black;
      padding: 10px;
  }​
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Tw5Vb/2/" rel="nofollow noreferrer" title="On JSFIDDLE">On JSFIDDLE</a></p>
  
  <hr>
  
  <p><strong>Second Attempt:</strong></p>
  
  <p><em>"Adding blank cells"</em></p>
  
  <p>I can get the preferred look of the table by adding blank cells in HTML code. But this approach defects semantic structure.</p>
  
  <pre><code>table {
      border-collapse: collapse;
      border-spacing: 1em;
  }
  
  table tbody tr {
      border-bottom: 1px solid black;
  }
  
  table thead tr th[colspan="2"]{
      border-bottom: 1px solid black;
      padding: 10px;
      text-align: center;
  }
  
  table tbody tr td {
      border-bottom: 1px solid black;
      padding: 10px;
  }​
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Tw5Vb/1/" rel="nofollow noreferrer" title="On JSFIDDLE">On JSFIDDLE</a></p>
  
  <hr>
  
  <p><strong>Other various attemps</strong></p>
  
  <p>I also tried <code>-webkit-border-image: -webkit-linear-gradient(left, black 95%, white 5%);</code> on headers borders but couldn't manage to get it working.</p>
  
  <hr>
  
  <p>After all I am open to new suggestions.</p>
  
  <p><strong>Note:</strong>
  This is going to be in an eBook file. So general background color may vary in different reader applications.</p>