title: fixing gridview header while scrolling
body: <p>I had fixed GridView header and while i scroll down headers will be constant but the problem is headers are not in proper format. Like all the column headers are shrinked and wont display under particular column . I tried many things but nothing was useful. Clearly saing header width is not equal to column. I have used JavaScript code for Scrolling and also CssClass for Fixing. </p>
  
  <p>Please find the solution for me </p>
  
  <p>JavaScript Code</p>
  
  <pre><code> &lt;script type = "text/javascript"&gt;
          var GridId = "&lt;%=GridViewLeaveHistory.ClientID %&gt;";
          var ScrollHeight = 300;
          var ScrollWidth = 300;
          window.onload = function () {
              var grid = document.getElementById(GridId);
              var gridWidth = grid.offsetWidth;
              var gridHeight = grid.offsetHeight;
              var headerCellWidths = new Array();
              for (var i = 0; i &lt; grid.getElementsByTagName("TH").length; i++) {
                  headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
              }
              grid.parentNode.appendChild(document.createElement("div"));
              var parentDiv = grid.parentNode;
  
              var table = document.createElement("table");
              for (i = 0; i &lt; grid.attributes.length; i++) {
                  if (grid.attributes[i].specified &amp;&amp; grid.attributes[i].name != "id") {
                      table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
                  }
              }
              table.style.cssText = grid.style.cssText;
              table.style.width = gridWidth + "px";
              table.appendChild(document.createElement("tbody"));
              table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
              var cells = table.getElementsByTagName("TH");
  
              var gridRow = grid.getElementsByTagName("TR")[0];
              for (var i = 0; i &lt; cells.length; i++) {
                  var width;
                  if (headerCellWidths[i] &gt; gridRow.getElementsByTagName("TD")[i].offsetWidth) {
                      width = headerCellWidths[i];
                  }
                  else {
                      width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
                  }
                  cells[i].style.width = parseInt(width - 3) + "px";
                  gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
              }
              parentDiv.removeChild(grid);
  
              var dummyHeader = document.createElement("div");
              dummyHeader.appendChild(table);
              parentDiv.appendChild(dummyHeader);
              var scrollableDiv = document.createElement("div");
              if (parseInt(gridHeight) &gt; ScrollHeight) {
                  gridWidth = parseInt(gridWidth) + 17;
              }
              scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px" + ScrollWidth;
              scrollableDiv.appendChild(grid);
              parentDiv.appendChild(scrollableDiv);
          }
  </code></pre>
  
  <p></p>
  
  <p>Css Class</p>
  
  <pre><code>.Freezing 
      { 
      position: relative;  
      top: expression(this.offsetParent.scrollTop-1); 
      z-index: 10; 
      }
  </code></pre>
  
  <p>GridView Code</p>
  
  <pre><code>&lt;div style="width: 810px; height: 259px;"&gt;
   &lt;asp:GridView ID="GridViewLeaveHistory" runat="server" AllowSorting="True" 
    AutoGenerateColumns="False" BackColor="White" BorderColor="#0061C1" 
    BorderStyle="None" CaptionAlign="Bottom" EmptyDataText="No Records Found" 
    Font-Names="Verdana" Font-Size="X-Small" ForeColor="#0061C1" Height="18px" 
    OnRowCommand="GridViewLeaveHistory_RowCommand" 
    OnRowDataBound="GridViewLeaveHistory_RowDataBound" CssClass="Freezing"                                                       
    OnSelectedIndexChanged="GridViewLeaveHistory_SelectedIndexChanged"                                                      
    ShowFooter="True" ShowHeaderWhenEmpty="True" width="801px"&gt;
  </code></pre>