freeze ASP.Net Gridview header using JavaScript----Header columns problem

Hi,

I tried using your piece of code to dynamically freeze header columns in my grid. Unfortunately, 

I am still facing the issue of header columns not aligned.My grid has 21 columns with one column 

for edit delete buttons (this column doesn't have a header).Please help.

<script type = "text/javascript">
     var GridId = "<%=HubPipelineGrid.ClientID %>";
     var ScrollHeight = 411;
     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";
         }
         
         var dummyHeader = document.createElement("div");
         dummyHeader.appendChild(table);
         parentDiv.appendChild(dummyHeader);
         var scrollableDiv = document.createElement("div");
         if (parseInt(gridHeight) > ScrollHeight) {
             gridWidth = parseInt(gridWidth) + 15;
         }
         scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px";
         scrollableDiv.appendChild(grid);
         parentDiv.appendChild(scrollableDiv);
     }
</script>