HTML table sticky header with borders

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:

Comments

[Eric Esterling]

Might not be the best choice because it is a-semantic. But if you add "aria-hidden: true" to the tr, it would help.

Changing table to "border-collapse: separate" helps in some circumstances.

Others are using a box-shadow to emulate a border. It's weird, but seems to be effective.