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:
Top comments (0)