Fixed table header using javascript / css [duplicate]

for gridview with fixed header in jquery use the following link

[http://gridviewscroll.aspcity.idv.tw/Demo/Advanced.aspx#HeaderColumnMerge][1]

Or for javascript refer the following code,

function CreateGridHeader() 
{ 
    var DataDivObj = document.getElementById('<%=divmain.ClientID%>');
    var DataGridObj = document.getElementById('<%=gridview.ClientID%>');
    var HeaderDivObj = document.getElementById('<%=HeaderDiv.ClientID%>');
    //********* Creating new table which contains the header row ***********
    var HeadertableObj = HeaderDivObj.appendChild(document.createElement('table'));
    DataDivObj.style.paddingTop = '0px';        
    var DataDivWidth = DataDivObj.clientWidth;
    DataDivObj.style.width = '5000px';
    //********** Setting the style of Header Div as per the Data Div ************
    HeaderDivObj.className = DataDivObj.className;
    HeaderDivObj.style.cssText = DataDivObj.style.cssText;
    //**** Making the Header Div scrollable. *****
    HeaderDivObj.style.overflow = 'auto'; 
    //*** Hiding the horizontal scroll bar of Header Div ****
    //*** this is because we have to scroll the Div along with the DataDiv.  
    HeaderDivObj.style.overflowX = 'hidden';
    //**** Hiding the vertical scroll bar of Header Div **** 
    HeaderDivObj.style.overflowY = 'hidden'; 
    HeaderDivObj.style.height = '21px';
    //**** Removing any border between Header Div and Data Div ****
    HeaderDivObj.style.borderBottomWidth = '0px'; 
    //********** Setting the style of Header Table as per the GridView ************
    HeadertableObj.className = DataGridObj.className;
    //**** Setting the Headertable css text as per the GridView css text 
    HeadertableObj.style.cssText = DataGridObj.style.cssText; 
    HeadertableObj.border = '1px';
    HeadertableObj.rules = 'all';
    HeadertableObj.cellPadding = DataGridObj.cellPadding;
    HeadertableObj.cellSpacing = DataGridObj.cellSpacing;
    //********** Creating the new header row **********
    var Row = HeadertableObj.insertRow(0); 
    Row.className = DataGridObj.rows[0].className;
    Row.style.cssText = DataGridObj.rows[0].style.cssText;
    Row.style.fontWeight = 'bold';        
    //******** This loop will create each header cell *********
    for(var iCntr =0; iCntr < DataGridObj.rows[0].cells.length; iCntr++)
    {
        var spanTag = Row.appendChild(document.createElement('td'));
        spanTag.innerHTML = DataGridObj.rows[0].cells[iCntr].innerHTML;
        var width = 0;
        //****** Setting the width of Header Cell **********
        if(spanTag.clientWidth > DataGridObj.rows[1].cells[iCntr].clientWidth)
        {
            width = spanTag.clientWidth;
        }
        else
        {
            width = DataGridObj.rows[1].cells[iCntr].clientWidth;
        }
        if(iCntr<=DataGridObj.rows[0].cells.length-2)
        {
            spanTag.style.width = width + 'px';
        }
        else
        {
            spanTag.style.width = width + 20 + 'px';
        }
        DataGridObj.rows[1].cells[iCntr].style.width = width + 'px';

    }
    var tableWidth = DataGridObj.clientWidth;
    //********* Hidding the original header of GridView *******
    DataGridObj.rows[0].style.display = 'none';
    //********* Setting the same width of all the components **********
    HeaderDivObj.style.width = DataDivWidth + 'px';
    DataDivObj.style.width = DataDivWidth + 'px';    
    DataGridObj.style.width = tableWidth + 'px';
    HeadertableObj.style.width = tableWidth + 20 + 'px';
    return false;
}  

call the above code on page load or wherever you want,

sub page_load()
   ScriptManager.RegisterStartupScript(Me, Me.GetType(), "CreateGridHeader", "javascript:CreateGridHeader()", True)
End Sub

and the design should have the following div's

<div id="divposgrid" style="width: 99.9%; border-bottom: 1px solid white;height: 220px;">
<div id="HeaderDiv" runat="server">
</div>
<div id="divmain" style="overflow: auto; height: 150px; margin-left: 1px; margin-top: 0px"  runat="server">
<`your table>
</div>
</div>