Go to homepage

Projects /

November 16, 2022

Sticky Table Header

By CodyHouse
404 HTML, CSS, JS components. Download →

How to make the header table sticky in CSS.

To make the table header sticky/fixed, you need to target the header cells and use the 'sticky' position value along with a background color:

th { /* header cell */
  position: sticky;
  top: 0;
  background-color: #F9F8F8;
}

If the table header has a border, you should apply it to the header cells and set the table border-collapse value equal to 'separate':

table {
  border-collapse: separate;
  border-spacing: 0;
}

th {
  position: sticky;
  top: 0;
  background-color: #F9F8F8;
  border-bottom: 2px solid #EB9486;
}

Code + live demo:

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.