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: