Fixed Header Footer Table

I am working on Fixed Header Footer table functionality almost from past 2 years. First version you can find in the same blog. That was my first post.

Now after two years, I am able to find something which works fine in Firefox as well as Chrome. Most difficult part was making the table scrollable in Chrome, FF and IE. (Only one dimensional scroll works in Firefox and Chrome, that means only fixed header and fixed footer not fix columns)

Now how to make Scrollable table in Chrome.

• Copy this code and modify it to suite your requirements.
• What ever highlighted in bold are important ones. Specify height and width for DIV.
• Height for tbody should be less than Div width(Div width -100px)

<STYLE> DIV.scrollTableALL{ clear: both; overflow: AUTO; width: 580px; height: 300px; POSITION: relative; color:black; } DIV.scrollTableALL thead td, tfoot td { background-color: #1B82E6; Z-INDEX: 60; position:relative; } DIV.scrollTableALL table{ border:0px; cellspacing:1px; cellpading:1px; TEXT-ALIGN: center; } DIV.scrollTableALL thead td{ TOP: expression(this.offsetParent.scrollTop -2); } DIV.scrollTableALL tfoot td{ TOP: expression(this.offsetParent.clientHeight + this.offsetParent.scrollTop - (this.offsetParent.scrollHeight -2)); } tr.odd{ background-color:#FFFFFF; } tr.even{ background-color:#D2E9FF; } th.fixedLeftALL, td.fixedLeftALL { z-index: 60; border-right: 1px solid silver; border-left: 1px solid silver; LEFT: expression(this.offsetParent.scrollLeft -1); POSITION: relative; } th.fixedRightALL, td.fixedRightALL { z-index: 60; border-right: 1px solid silver; border-left: 1px solid silver; LEFT: expression(this.offsetParent.clientWidth - this.offsetParent.scrollWidth + this.offsetParent.scrollLeft +1); POSITION: relative; } html>body div.scrollTableALL { overflow: hidden; } html>body tbody.scrollBodyALL { height: 200px; overflow: auto; } </style> <div class="scrollTableALL" id = "scrollTableALL"> <table id="TableALL" width="100%"> <thead class="scrollHeadALL" id="scrollHeadALL"> <tr> <td class="fixedLeftALL" style="z-index:80;">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL" style="z-index:80;">Last-column</td> <!--[if !IE]><!--> <td width="14px"> </td> <!--<![endif]--> </tr> </thead> <tbody class="scrollBodyALL" id="scrollBodyALL"> <tr style="background-color:#D2E9FF"> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> </tr> <tr style="background-color:#FFFFFF"> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> </tr> <tr style="background-color:#D2E9FF"> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> </tr> <tr style="background-color:#FFFFFF"> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> </tr> <tr style="background-color:#D2E9FF"> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> </tr> <tr style="background-color:#FFFFFF"> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> </tr> <tr style="background-color:#D2E9FF"> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> </tr> <tr style="background-color:#FFFFFF"> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> </tr> <tr style="background-color:#D2E9FF"> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> </tr> <tr style="background-color:#FFFFFF"> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> </tr> <tr style="background-color:#D2E9FF"> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> </tr> <tr style="background-color:#FFFFFF"> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> </tr> <tr style="background-color:#D2E9FF"> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> </tr> <tr style="background-color:#FFFFFF"> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> </tr> <tr style="background-color:#D2E9FF"> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> </tr> <tr style="background-color:#FFFFFF"> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> </tr> <tr style="background-color:#D2E9FF"> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> </tr> <tr style="background-color:#FFFFFF"> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> </tr> </tbody> <tfoot class="scrollFooterALL" id="scrollFooterALL"><tr> <tr> <td class="fixedLeftALL">first-column</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td>second</td> <td class="fixedRightALL">Last-column</td> <!--[if !IE]><!--> <td width="14px"> </td> <!--<![endif]--> </tr> </tr></tfoot> </table> </div> <script> var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome')> -1; if(is_chrome){ document.getElementById('scrollHeadALL').style.display ="block"; document.getElementById('scrollBodyALL').style.display ="block"; document.getElementById('scrollFooterALL').style.display ="block"; document.getElementById('scrollTableALL').style.width ="540px"; } </script>

I guess you want to know what is difference between present code which works fine in Chrome and Firefox and past code which only works fine in IE.

Here I have used HTML tags which changes the style sheet according to browser. The below code works only when browser is other than IE.
These CSS are regarded as CSS hacks, but they are still safe to to use. You can check this website http://www.webdevout.net/css-hacks for more information.


html>body div.tableHolder {
overflow: hidden;
}
html>body tbody.scrollBody {
height: 200px;
overflow: auto;
}

The code for IE is same. But for Firefox and Chrome what I am doing is; I am making TBODY scrollable by setting Overflow:auto


But if we make TBODY scrollable, there is one problem with the last column. It will have different width. And  it will behave differently when used in FF and Chrome. So I have added extra cell for header and footer by using the below code.


<!--[if !IE]><!-->
<td widtd="16px" style="background-color:#ffffff; visibility: hidden"> </td>
<!--<![endif]-->

If the browser is not IE then it will add a extra cell to header. and Similar code is kept in footer to do the same thing.

I don't have much knowledge on browser, but few things were not working fine in Chrome. So kept Javascript which will detect Chrome browser and change the properties accordingly.

<script>

var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome')> -1;

if(isChrome){

document.getElementById('scrollHead').style.display ="block";

document.getElementById('scrollBody').style.display ="block";

document.getElementById('scrollFooter').style.display ="block";

document.getElementById('tableHolder2').style.width ="580px";

}

</script>

Rest of the code is explained in the my previous post.

first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column
first-column	second	second	second	second	second	second	second	second	Last-column