High CSS Question 174 of 229

How would you implement a sticky table header without breaking overflow?

Frontend Master · Speak this in 60–90 seconds · Faridabad & Delhi NCR

Flex — one line

Grid — rows + cols

Position sticky on th only works if ancestors do not have overflow hidden.

Why interviewers care about CSS:

This is a process

question about CSS.

Panels listen for order,

trade-offs, and what you would actually do on a Frontend project - not buzzwords.

Stay structured

Name the idea, why it exists, then one short example.

Close cleanly

End with when you use it and one common pitfall.

Before you speak the answer, walk the interviewer through these steps:

1
Position sticky on th
only works if ancestors do not have overflow hidden.
2
I put overflow auto
on the table wrapper and stick thead th to top zero.
3
For complex grids I
sometimes split header and body tables, but I mention accessibility of one table as the preference.
4
Give an example
One tiny concrete case you can say aloud.
5
Common mistake
What juniors usually get wrong.
6
Close
When you pick this over the alternative.

Here's a short line you can speak, broken into clear beats:

Say this line

“I put overflow auto on the table wrapper and stick thead th to top zero.”

Break into beats

Iputoverflowautoonthe

Speaking order

2987408337471632900

Note: Adapt this scaffold to your own project — keep it under 60–90 seconds.

Position sticky on th only works if ancestors do not have overflow hidden. I put overflow auto on the table wrapper and stick thead th to top zero.