title: HTML Table: Having a border on just the table header with border-collapse:separate on the table
body: <p>This is how I need my table to look:</p>
  
  <p><img src="https://i.stack.imgur.com/SCh2S.png" alt="enter image description here"></p>
  
  <p>I need to add a solid border beneath the table heading row. However, I also need to have spacing between the cells of the table. I have to use the border-collapse property on the table in order to get spacing between the gray cells, and "border-collapse: separate" prevents me from adding a bottom border to the heading row.</p>
  
  <p>How can I add a solid border beneath the table header while also maintaining the spacing between the table columns?</p>
  
  <p>These are the styles I have; the border-collapse style negates the border-bottom. When I remove the border-collapse, the border-bottom works.</p>
  
  <pre><code>tr.heading{
      border-bottom: 1px solid black;
  }
  
  table{
      border-collapse: separate;
  }
  </code></pre>
  
  <p>Here's a fiddle: 
  <a href="https://jsfiddle.net/8u9krzyg/" rel="nofollow noreferrer">https://jsfiddle.net/8u9krzyg/</a></p>