title: Table fixed header and scrollable body, problem with content behind header
body: <p>I have a table that needs a sticky header for vertical scroll. The table withotu scrolling looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/DwMGs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DwMGs.png" alt="enter image description here"></a></p>
  
  <p>Bu I have this problem when I scroll:</p>
  
  <p><a href="https://i.stack.imgur.com/jeCFe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jeCFe.png" alt="enter image description here"></a></p>
  
  <p>In the red square you can see that the body of the table are behind the header. If I put the border-top to 0 it solves the problem, but I need the table to have that border, I don't want to change the style.</p>
  
  <p>The main css for the sticky header trick is this:</p>
  
  <pre><code>.tableFixHead {
      overflow-y: auto;
      height: 100px;
  }
  
  .tableFixHead thead th {
      position: sticky;
      top: 0;
  }
  
  .tableFixHead th {
      background: white;
      /*border-top: 0 !important;*/
  }
  
  .table-responsive-bold{
      font-weight: bold;
  }
  </code></pre>
  
  <p>I have this fiddle to test the problem: <a href="https://jsfiddle.net/pmiranda/eaLv7qpn/1/" rel="nofollow noreferrer">https://jsfiddle.net/pmiranda/eaLv7qpn/1/</a></p>
  
  <p>I also had to put the background color of the <code>th</code> elements in white. I took the idea from <a href="https://stackoverflow.com/a/47923622/3541320">https://stackoverflow.com/a/47923622/3541320</a></p>
  
  <p>Any suggestion?</p>