Fixed table header using javascript / css

Question

I have a table as shown below, and am trying to create a fixed header, so that no matter how much I scroll down, the header is always visible to the user. I don't have much experience with web design, so was wondering how to do this using either css / javascript? What I'm guessing is that I first need to put a <thead> tag around the <th> tags to make them one entity? Although this has to be done using javascript, as the html is generated using an external macro which I am not able to edit. Any help is much appreciated!

<table id="TBL1399802283490" class="confluenceTable">
  <tbody>
    <tr>
      <th class="confluenceTh" style="cursor: pointer;">Server Name  </th>
      <th class="confluenceTh" title="null" style="cursor: pointer;">Network Zone  </th>
      <th class="confluenceTh" title="null" style="cursor: pointer;">Operational Status  </th>
    </tr>
      <td class="confluenceTd"><div style="left:1em;right:1em"> w264521f </div>  </td>
      <td class="confluenceTd"><div style="left:1em;right:1em"> GREEN </div>  </td>
      <td class="confluenceTd"><div style="left:1em;right:1em"> READY </div>  </td>
    <tr>
    </tr>
  </tbody>
</table>

Please note that the columns are not fixed width. They need to be variable, as the data is not constant.

@SW4 Not really, I'm asking how to get the `` tags in Javascript — AkshaiShah, May 13 '14 at 10:58
@Anonymous That answer uses Jquery, which I am not able to use. Only pure Javascript. — AkshaiShah, May 13 '14 at 11:03
well this can be useful for u.https://github.com/jmosbech/StickyTableHeaders — Green Wizard, May 13 '14 at 11:03
@AkshaiShah Either way, there were at least three different questions asking the same when searching for this on google. — Anonymous, May 13 '14 at 11:07
This is helpful. This question is asked before. [http://stackoverflow.com/questions/17753238/fixed-header-and-scrollable-body][1] — Justin George, May 13 '14 at 11:08

score 0 · Answer 1 · answered May 13 '14 at 11:14

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>

Fixed table header using javascript / css

1 Answers1