How to freeze the top row for an HTML table only with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published.