Html Table With Fixed Header & Scrollable Body


In this post I will explain how to create a HTML table with fixed header & scroll-able body.

How we can Fix headers in a html table(Scroll Body). Here is the simple and nice solution.

In Internet Explorer:

In IE we have a style option expression using this we can fix headers Add following css code to tr tag in table (i.e.,th tag)

style=”position: relative; 
top: expression(this.offsetParent.scrollTop);”

But It will work only in IE 5+ . to fix headers in other browsers we have an alternate.

For all browsers:

This is actual table. I have created two div inner,outer as shown below (actual table)

< div class=”outer”>
< div class=”inner”>
< table> < thead> < /thead> < tbody> < /tbody> < /table>
< /div>
< div class=”Headers”>
< table> < thead> < /thead> < tbody> < /tbody> < /table> (dummy table)
< /div>
< /div>

And also I have created one dummy table as shown above with class Headers

In CSS I wrote following code.

.outer {
position:relative;//this is very imp
width:500px;
}
.inner {
height:150px;
overflow:auto;
}
.header {
position:absolute; //this is very imp
top:0;
left:0;
overflow:hidden;
}

In header we have position:absolute; when we declare position absolute it checks for it is parent tag ie., outer

If in outer if position is relative. Then Where ever we write header div class in html document it always print relative to outer div class.

And top position is 0 in header ie., outer div header div overlap with each other. Initially header div contain nothing

In jquery we are copying header from inner table to header table as shown below

$(document).ready(function() {
$(‘.header table thead’).html( $(‘.inner table thead’).html() );
$(‘.header’).css(‘width’, $(‘.inner table’).outerWidth() );
$(‘.header’).css(‘height’, $(‘.inner table thead’).outerHeight() );
});

Wait before leaving. why can’t you follow me on twitter or be a friend on Facebook or linkedn to get in touch with me.

Spread the word

Get free link to download 900+ Material Icons
Avatar
Arunkumar Gudelli

I am One among a million Software engineers of India. I write beautiful markup.I make the Web useful.

Next