Problem: Sticky Table Header

easy
15 min
Try to create a scrollable table with a sticky <thead> that remains visible at the top of the container while scrolling through rows.

Problem description

You have a scrollable table container with a large number of data rows. As you scroll down, the table header (<thead>) should remain visible at the top of the container.

Goal

Use CSS to make the table header sticky so it always appears at the top of the scrolling table container.

Constraints

  • Use CSS only (no JavaScript is allowed).

  • Ensure compatibility with modern browsers.

  • The table container has a fixed height with overflow.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.

Problem: Sticky Table Header

easy
15 min
Try to create a scrollable table with a sticky <thead> that remains visible at the top of the container while scrolling through rows.

Problem description

You have a scrollable table container with a large number of data rows. As you scroll down, the table header (<thead>) should remain visible at the top of the container.

Goal

Use CSS to make the table header sticky so it always appears at the top of the scrolling table container.

Constraints

  • Use CSS only (no JavaScript is allowed).

  • Ensure compatibility with modern browsers.

  • The table container has a fixed height with overflow.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.