Fixing header of HTML table

More often than not when using a HTML table we need the header of the table to be fixed especially when the data set is too large. The task can be a little bit tricky especially for beginners. Although there are plugins out there in the market for this, we will try to understand and implement it by ourselves for our case. We will use jQuery to write a function along with HTML and CSS for achieving this in two simple steps.

Table structure:

<table>…….</table>

Step-1:

Let us first add two <div>’s covering our table. First <div>, the parent of the <table> will carry the scroll and its parent, the outermost <div> will carry a position relative to place the static header in position.

HTML:

<div class=”outer-div”>
<div class=”inner-div”>
<table id=”my-table”>
……..
……..
</table>
</div>
</div>

CSS:

.outer-div{ position: relative}
.inner-div{overflow: auto; height: xx px} /* height can be set for this div or for our table*/

Step-2:

Now that the structure for our task is set, now we will create and use a jQuery function which takes our table’s outer most <div> as parameter and fixes the header for it. Let us call the function fixedHeaderTable() or whatever you like :P

jQuery:

In your JavaScript file, call the function like
fixedHeaderTable($(“.outer-div”)); // passing the reference of outer div

function fixedHeaderTable($cover){
//finding and setting the table
var $table;
 var tables_inside_cover = $cover.find(‘table’);
 $table = (tables_inside_cover.length == 1) ? tables_inside_cover : tables_inside_cover.last();

//removing previously added header cover for table if any
$cover.find(‘.fixed-header’).remove();

//constructing the cloned table
var $cloned_table = $table.clone();
 $cloned_table.removeAttr(‘id’);
 $cloned_table.find(‘tbody’).remove();
 $cover.prepend($(‘<div>’).addClass(‘fixed-header’));
 var $fixed_header = $cover.find(‘.fixed-header’);
 $fixed_header.prepend($cloned_table);

//Setting scroll for fixed headers based on table scroll
$table.parent().scroll(function(){
 $fixed_header.scrollLeft($(this).scrollLeft());
 });

}

What did we actually do?
1) Find the existing table and clone it and have a reference.
2) Remove the <tbody> of table(as we are interested only in header) of the cloned reference.
3) Adding a new div with class “fixed-header” right after the passed <div>(i.e) the outer-div in our case.
4) Adding the cloned table reference to the new div with class “fixed-header”.
5) Defining scroll for fixed-header to follow the scroll of the inner-div for which we defined the scroll earlier.

Bingo! We are all set to explore. The CSS for the newly added class is shown below

CSS:

.fixed-header{ position: absolute; overflow-x: hidden; top: 0px; left: 0px; z-index: 1 }
.fixed-header::-webkit-scrollbar { display: none }

The fixed-header div is actually absolute positioned which sits at top-left of the outer div, covering our original table header. As its scroll listens to the scroll of the inner-div, the fixed-header also scrolls horizontally. And since it is absolutely placed at top-left, the cloned-table, which is actually the fixed-header in our case will wrap the original header of table and act as fixed header of the table. Cool isn’t it!

I know it might sound a bit confusing reading stuffs, so go give it a try and read the article again and things will sound much better. This is my first post, so please excuse me for minor errors. All comments are welcome. Thanks for reading!

Like what you read? Give Ashok Muralidharan a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.