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)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay