HTML/CSS Tricks — Scroll-able Table Body <tbody>

Rajan V
Rajan V
Sep 5, 2017 · 1 min read

This simple tricks to solve the problem of making table body scroll-able with fixed table headers. This makes the data table easier to use. Fixed table header when user scroll provides the context to user on what column the user is on.

Image Source —

Overflow property doesn’t apply to table grouping element thead, tbody , tfoot by default. You can see this for yourself in the below pen,

To make it working,

first step will be : setting <tbody> to display:block so that we can apply the height and overflow property.

next step will be : setting the <thead><tr> to display:block

So final CSS will be,

.fixed_header tbody{
.fixed_header thead tr{

The example below,

The markup to create table is simple and semantic. And solves the problem without JavaScript dependency.

If you have any suggestions for improvements or find any issues please let me know in the comments.

Rajan V

Written by

Rajan V

Introvert | Front End Developer.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade