DEV Community

Krzysztof Żuraw
Krzysztof Żuraw

Posted on • Originally published at krzysztofzuraw.com on

6

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

See this in action in this Codepen:

Top comments (0)

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay