Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Freeze Header and First Column in Table

Solution: Freeze Header and First Column in Table

Let’s create a table where the header stays fixed on top and the first column stays fixed on the left while scrolling.

We'll cover the following...

Problem description

You have an HTML table with many rows and columns placed inside a container with limited width and height. As the user scrolls vertically, the header row should stay fixed at the top of the container. As they scroll horizontally, the first column should stay fixed on the left. The top-left cell (header of the first column) must handle both stickiness without visual glitches. ...