Krzysztof Żuraw

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:

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

See this in action in this Codepen:

See the Pen Untitled by Krzysztof Żuraw (@krzysztofzuraw) on CodePen.