固定gridview标题，而滚动

我有固定的GridView标题，而当我向下滚动标题将是常数，但问题是标题不正确的格式。像所有的列标题都缩小，并不会显示在特定的列下。我尝试了很多东西，但没有什么用处。清楚地看到标题宽度不等于列。我已经使用JavaScript代码滚动和CssClass for Fixing。固定gridview标题，而滚动

请给我找的解决方案

JavaScript代码

<script type = "text/javascript"> 
     var GridId = "<%=GridViewLeaveHistory.ClientID %>"; 
     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 < 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 < grid.attributes.length; i++) { 
       if (grid.attributes[i].specified && 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 < cells.length; i++) { 
       var width; 
       if (headerCellWidths[i] > 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) > ScrollHeight) { 
       gridWidth = parseInt(gridWidth) + 17; 
      } 
      scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px" + ScrollWidth; 
      scrollableDiv.appendChild(grid); 
      parentDiv.appendChild(scrollableDiv); 
     }

CSS类

.Freezing 
    { 
    position: relative; 
    top: expression(this.offsetParent.scrollTop-1); 
    z-index: 10; 
    }

GridView控件代码

<div style="width: 810px; height: 259px;"> 
<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">

来源

2013-08-01 Suraj