Fixed Header Footer without CSS hacks

Few CSS tags which I have used in my below posts are called as CSS hacks. Still I feel they are very save, because they are just changing styles with the browser.

Anyways, here is the new version. I think it is quite difficult to edit this version when compared to older one. If you need any kind of help, just let me know. I would be glad to help you.

Changes what I did from my previous version.

• Removed CSS tags for cross browser scripting.
• Added JavaScript code instead of CSS hacks.

You can get information about CSS Hacks here!!

<STYLE> DIV.scrollTableNoHack{ clear: both; overflow: AUTO; width: 580px; height: 300px; POSITION: relative; color:black; } DIV.scrollTableNoHack thead td, tfoot td { background-color: #1B82E6; Z-INDEX: 60; position:relative; } DIV.scrollTableNoHack table{ border:0px; cellspacing:1px; cellpading:1px; TEXT-ALIGN: center; } DIV.scrollTableNoHack thead td{ TOP: expression(this.offsetParent.scrollTop -2); } DIV.scrollTableNoHack 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.fixedLeftNoHack, td.fixedLeftNoHack { z-index: 60; border-right: 1px solid silver; border-left: 1px solid silver; LEFT: expression(this.offsetParent.scrollLeft -1); POSITION: relative; } th.fixedRightNoHack, td.fixedRightNoHack { 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; } </STYLE> <div class="scrollTableNoHack" id = "scrollTableNoHack"> <table id="TableNoHack" width="100%"> <thead class="scrollHeadNoHack" id="scrollHeadNoHack"> <tr id="tr1"> <td class="fixedLeftNoHack" 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="fixedRightNoHack" style="z-index:80;">Last-column</td> </tr> </thead> <tbody class="scrollBodyNoHack" id="scrollBodyNoHack"> <tr style="background-color:#D2E9FF"> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> <tr style="background-color:#FFFFFF"> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> <tr style="background-color:#D2E9FF"> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> <tr style="background-color:#FFFFFF"> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> <tr style="background-color:#D2E9FF"> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> <tr style="background-color:#FFFFFF"> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> <tr style="background-color:#D2E9FF"> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> <tr style="background-color:#FFFFFF"> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> <tr style="background-color:#D2E9FF"> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> <tr style="background-color:#FFFFFF"> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> <tr style="background-color:#D2E9FF"> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> <tr style="background-color:#FFFFFF"> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> <tr style="background-color:#D2E9FF"> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> <tr style="background-color:#FFFFFF"> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> <tr style="background-color:#D2E9FF"> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> <tr style="background-color:#FFFFFF"> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> <tr style="background-color:#D2E9FF"> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> <tr style="background-color:#FFFFFF"> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> </tbody> <tfoot class="scrollFooterHack" id="scrollFooterHack"> <tr> <td class="fixedLeftNoHack">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="fixedRightNoHack">Last-column</td> </tr> </tfoot> </table> </div> <script> var isChrome = navigator.userAgent.toUpperCase().indexOf('CHROME')> -1; var isIE = navigator.userAgent.toUpperCase().indexOf('MSIE')> -1; if(isChrome){ document.getElementById('scrollHeadNoHack').style.display ="block"; document.getElementById('scrollBodyNoHack').style.display ="block"; document.getElementById('scrollFooterHack').style.display ="block"; document.getElementById('scrollTableNoHack').style.width ="540px"; } if(!isIE){ document.getElementById('scrollBodyNoHack').style.height ="200px"; document.getElementById('scrollBodyNoHack').style.overflow ="auto"; document.getElementById('scrollTableNoHack').style.overflow ="hidden"; var rows = document.getElementById('TableNoHack').getElementsByTagName('tr'); var cols = rows[0].getElementsByTagName('td'); var tcell1 = rows[0].insertCell(cols.length); tcell1.setAttribute("width", "12px"); tcell1.setAttribute("style", "visibility:hidden"); var tcell2 = rows[rows.length -1].insertCell(cols.length); tcell2.setAttribute("width", "12px"); } </script>

This is similar to my first post Scrollable Table only thing is it has JavaScript which detects the browser and do changes. Here good thing is I have avoided CSS hacks. (Few words create disturbance in our mind. If we avoid those words we will be very happy. Hack is one kind of word which do the same :-) )

The below script does the magic part. First I am identifying if the browser. I am checking if the browser is Chrome and if it is IE.

<script> 

var isChrome = navigator.userAgent.toUpperCase().indexOf('CHROME')> -1; 
var isIE = navigator.userAgent.toUpperCase().indexOf('MSIE')> -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"; 
} 
if(!isIE){ 
 document.getElementById('scrollBody').style.height ="200px"; 
 document.getElementById('scrollBody').style.overflow ="auto"; 
 document.getElementById('tableHolder2').style.overflow ="hidden"; 
  
 var rows = document.getElementById('Table0').getElementsByTagName('tr');   
 var cols = rows[0].getElementsByTagName('td'); 
 var tcell1 = rows[0].insertCell(cols.length); 
 tcell1.setAttribute("width", "12px"); 
 tcell1.setAttribute("style", "visibility:hidden"); 
 var tcell2= rows[rows.length-1].insertCell(cols.length); 
 tcell2.setAttribute("width", "12px"); 
  
} 
</script> 

First script is meant for Chrome browser. I am setting display attribute as block for THEAD, TBODY & TFOOT. I still need to dig other ways. But this is the thing which is working fine now

Second script is meant for Browsers other than IE. Here I am setting overflow property of TBODY to auto, Assigning height to TBODY. Then the last step was to add a extra cell to the THEAD and TFOOT.

After making all the changes the code works fine.

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