Freeze Table Header and Columns

Introduction

I was developing a web based application that needed a datagrid/table that can freeze its header and columns, and also have a complex that consists of merged cells. I have searched on the internet but I still can't find the one that I wanted. So, I decided to build it by my self, and thank god I made it :). And now I want to share the code with the world. This article describe how to build a table with freeze capability using built-in ASP.Net controls and some HTML tags.

Using the code

To build the freeze-able table we need to use the DIV, TABLE tag, ASP.Net Panel and PlaceHolder control and of course some javascript and CSS. You can see the layout in Figure 1. 

<P>
<TABLE align=center border=0>
<TBODY>
<TR>
<TD>Figure 1. The layout to position the tag and controls.
</TD></TR></TBODY></TABLE>
<TABLE border=1>
<TBODY>
<TR>
<TD widht="20%"><B>Object Name </B></TD>
<TD><B>Description </B></TD></TR>
<TR>
<TD>divScrollbar </TD>
<TD>We will use this to show horizontal scrollbar. So we can show the hidden
area of tblPart2 using JavaScript and give the impression that we freeze the
columns in tblPart1. This will be accomplished using JavaScript. </TD></TR>
<TR>
<TD>ASP Panel control </TD>
<TD>Optional. This will be used only if you want to be able to show or hide the
entire objects. </TD></TR>
<TR>
<TD>divItems </TD>
<TD>This DIV will be used for vertical scrollbar so we can give impression to
the user that the header is frozen. We will do this using CSS. </TD></TR>
<TR>
<TD>TABLE tag </TD>
<TD>To synchronize the position of tblPart1 and tblPart2. </TD></TR>
<TR>
<TD>tblPart1 </TD>
<TD>This table will be container of the freezing columns. We will generate the
rows later. </TD></TR>
<TR>
<TD>divPart2 </TD>
<TD>This DIV is use to clip the view of tblPart2 </TD></TR>
<TR>
<TD>tblPart2 </TD>
<TD>This table is like tblPart1, but some of it's columns is hidden by divPart2.
This table will be scrolled horizontally by divScroller. The header and rows
will be generated later. </TD></TR>
<TR>
<TD>PlaceHolder1 </TD>
<TD>Act as the container for the generated rows for tblPart1. </TD></TR>
<TR>
<TD>PlaceHolder2 </TD>
<TD>Act as the container for the generated header and rows for tblPart2.
</TD></TR>
<TR>
<TD align=middle colSpan=2><B>Table 1. Functional description of the
objects</B></TD></TR></TBODY></TABLE></P>
<P>To freeze the header we can use the following CSS code: <PRE lang=jscript>tr.head
{
 position:relative; top: expression(document.all["divItems"].scrollTop-1);
}
</PRE>
<P></P>
<H2>Building the horizontal scrollbar</H2>
<P>To mimic IE scrollbar we can place a DIV tag inside a DIV tag. And resize
both of them at run-time using JavaScript, this is done in
<CODE>ResizeTables()</CODE> function.
<P><PRE lang=jscript> function ResizeTables()
 {        
  if (document.readyState)
  { 
      
   if (!document.all['divItems']) return;
   divItems.style.width = document.body.clientWidth-17;
   divItems.style.left = 0;       
      
   divPart2.style.width = document.body.clientWidth-155;
   scroll1.style.width = divItems.style.width;
   scroll1.style.width = divItems.style.width;
   if(screen.width > 800)
    spacing1.style.width = tblPart2.offsetWidth+ tblPart1.offsetWidth;
   else
    spacing1.style.width = tblPart2.offsetWidth+ tblPart1.offsetWidth;         
          
   var AvailableHeight;
   AvailableHeight = 500;               
   divItems.style.height  = AvailableHeight;          
     
   divPart2.style.width = divItems.offsetWidth - tblPart1.offsetWidth-2; 
  
   if (parseInt(divPart2.style.width) +
      tblPart1.offsetWidth < document.body.clientWidth )
   { 
    if (screen.width > 800)
    {             
     if(parseInt(divItems.style.height) < divPart2.offsetHeight)
     {                                                  
      divPart2.style.width = divItems.offsetWidth  -tblPart1.offsetWidth-19;
     }
    }
    else
    {
     if(parseInt(divItems.style.height) > divPart2.offsetHeight)
     {                        
      divPart2.style.width = divItems.offsetWidth -tblPart1.offsetWidth-2;
     }           
     else
     {
      divPart2.style.width = divItems.offsetWidth -tblPart1.offsetWidth-19;
     }          
    }

   }
  }
 }
 
 function OnScroll(sc)
 { 
  document.getElementById("divPart2").scrollLeft = sc.scrollLeft;
 }        
 window.onload = ResizeTables;
 window.onresize = ResizeTables;</PRE>