Home > HTML > Html table with fixed header & scrollable body

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() );
});
 
If you have any doubt please free to contact me.
Wait before leaving. why can’t you follow me on twitter or be a friend on Facebook or googlePlus or linkedn to get in touch me. or join our mailing list

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Arunkumar Gudelli
I am “One among a million” Software engineers of India. I write beautiful markup.I make the Web useful. You can connect me via @twitter or @facebook or Google+ or e-mail.
http://www.arungudelli.com

Lets have chat