title: Spacing between thead and tbody
body: <p>I have a simple html table like this:</p>
  
  <pre><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;&lt;th&gt;Column 1&lt;/th&gt;&lt;th&gt;Column 2&lt;/th&gt;&lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr class="odd first-row"&gt;&lt;td&gt;Value 1&lt;/td&gt;&lt;td&gt;Value 2&lt;/td&gt;&lt;/tr&gt;
      &lt;tr class="even"&gt;&lt;td&gt;Value 3&lt;/td&gt;&lt;td&gt;Value 4&lt;/td&gt;&lt;/tr&gt;
      &lt;tr class="odd"&gt;&lt;td&gt;Value 5&lt;/td&gt;&lt;td&gt;Value 6&lt;/td&gt;&lt;/tr&gt;
      &lt;tr class="even last-row"&gt;&lt;td&gt;Value 7&lt;/td&gt;&lt;td&gt;Value 8&lt;/td&gt;&lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And I would like to style it the following way:</p>
  
  <ul>
  <li>header row with a box-shadow</li>
  <li>whitespace between the header row and the first body row</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/gWO0F.png" alt="Box Shadow on Header + Spacing to Body"></p>
  
  <p>I have tried different things:</p>
  
  <pre><code>table {
      /* collapsed, because the bottom shadow on thead tr is hidden otherwise */
      border-collapse: collapse;
  }
  /* Shadow on the header row*/
  thead tr   { box-shadow: 0 1px 10px #000000; }
  /* Background colors defined on table cells */
  th         { background-color: #ccc; }
  tr.even td { background-color: yellow; }
  tr.odd td  { background-color: orange; }
  
  /* I would like spacing between thead tr and tr.first-row */
  
  tr.first-row {
      /* This doesn't work because of border-collapse */
      /*border-top: 2em solid white;*/
  }
  
  tr.first-row td {
      /* This doesn't work because of border-collapse */
      /*border-top: 2em solid white;*/
      /* This doesn't work because of the td background-color */
      /*padding-top: 2em;*/
      /* Margin is not a valid property on table cells */
      /*margin-top: 2em;*/
  }
  </code></pre>
  
  <p>See also: <a href="http://labcss.net/#8AVUF" rel="noreferrer">http://labcss.net/#8AVUF</a></p>
  
  <p>Does anyone have any tips on how I could do this? Or achieve the same visual effect (i.e. bod-shadow + spacing)?</p>