I recently had to create an HTML table with a sticky header. It turns out you need this piece of CSS to make it work:

thead {
  position: sticky;
  top: 0;
  background: white;
  text-align: left;
}

Which is fine and awesome - but what if your header needs to have a border at the bottom? Adding border-bottom property won't work if header is sticky. After a few trial and error hours I found out (with help of Mateusz) that you can add empty table row under your table head:

<tr>
  <th style="height:1px; padding:0px; color:black" colspan="6"></th>
</tr>

See this in action in this Codepen: