Sometimes, we want to freeze the top row for an HTML table only with CSS.
In this article, we’ll look at how to freeze the top row for an HTML table only with CSS.
How to freeze the top row for an HTML table only with CSS?
To freeze the top row for an HTML table only with CSS, we use position: sticky on th elements.
For instance, we write
table {
text-align: left;
position: relative;
}
th {
background: white;
position: sticky;
top: 0;
}
to add position: sticky; to th elements to make the table header sticky.
Conclusion
To freeze the top row for an HTML table only with CSS, we use position: sticky on th elements.
