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() );
});