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 ? https://uxdesign.cc/design-better-data-tables-4ecc99d23356
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{ display:block; overflow:auto; height:200px; width:100%;}.fixed_header thead tr{ display:block;}
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.
