title: Grid view fixed header
body: <p>I need to fix header of the grid view. I tried jscript file ,</p>
  
  <pre><code>        &lt;div class="Container"  style="width: 816px; height: 319px;"&gt;
                                                          &lt;asp:GridView 
                                                          ID="GrdViewMyTasks" 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"  
                                                          OnRowDataBound="GrdViewMyTasks_RowDataBound" width="99%" Height="247px"
                                                          onselectedindexchanged="GrdViewMyTasks_SelectedIndexChanged" ShowFooter="True" 
                                                          ShowHeaderWhenEmpty="True" &gt;
                                                          &lt;Columns&gt;
                                                          &lt;asp:BoundField DataField="TaskID" HeaderText="SL No" &gt;
                                                                  &lt;FooterStyle BackColor="#0061C1" /&gt;
                                                                  &lt;HeaderStyle BackColor="#0061C1" HorizontalAlign="Center" 
                                                                  VerticalAlign="Middle"  /&gt;
                                                                &lt;ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" /&gt;
                                                               &lt;/asp:BoundField&gt;
                                                               &lt;asp:TemplateField HeaderText="Task Name"&gt;
                                                               &lt;ItemTemplate&gt;
                                                                  &lt;asp:Label ID="TaskName" runat="server" 
                                                                      Font-Names="Verdana" Font-Size="X-Small" Height="24px" 
                                                                      Text='&lt;%# Eval("TaskName")%&gt;' Width="70px"&gt;&lt;/asp:Label&gt;
                                                              &lt;/ItemTemplate&gt;
                                                              &lt;FooterStyle BackColor="#0061C1" /&gt;
                                                              &lt;HeaderStyle BackColor="#0061C1" ForeColor="White"   /&gt;
                                                              &lt;ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" /&gt;
                                                              &lt;/asp:TemplateField&gt;
                                                              &lt;asp:TemplateField HeaderText="Due Date"&gt;
                                                              &lt;ItemTemplate&gt;
                                                              &lt;asp:Label 
                                                                      ID="DueDate" runat="server" DataFormatString="{0:dd/MM/yyyy}" 
                                                                      Font-Names="Verdana" Font-Size="X-Small" Height="20px" 
                                                                      Text='&lt;%# Eval("DueDate","{0:dd/MM/yyyy}")%&gt;' Width="70px"&gt;&lt;/asp:Label&gt;
                                                              &lt;/ItemTemplate&gt;
                                                              &lt;FooterStyle BackColor="#0061C1" /&gt;
                                                              &lt;HeaderStyle BackColor="#0061C1" ForeColor="White"   /&gt;
                                                              &lt;ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" /&gt;
                                                              &lt;/asp:TemplateField&gt;
                                                              &lt;asp:TemplateField HeaderText="Description"&gt;
                                                              &lt;ItemTemplate&gt;
                                                              &lt;asp:Label 
                                                                      ID="Description" runat="server" Font-Names="Verdana" Font-Size="X-Small" 
                                                                      Height="20px" Text='&lt;%# Eval("Description")%&gt;' Width="90px"&gt;&lt;/asp:Label&gt;
                                                              &lt;/ItemTemplate&gt;
                                                              &lt;FooterStyle BackColor="#0061C1" /&gt;
                                                              &lt;HeaderStyle BackColor="#0061C1" ForeColor="White"  /&gt;
                                                              &lt;ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" /&gt;
                                                              &lt;/asp:TemplateField&gt;
                                                              &lt;asp:TemplateField HeaderText="Assign By"&gt;
                                                              &lt;ItemTemplate&gt;
                                                              &lt;asp:Label 
                                                                      ID="AssignBy" runat="server" Font-Names="Verdana" Font-Size="X-Small" 
                                                                      Height="20px" Text='&lt;%# Eval("AssignBy")%&gt;' Width="80px"&gt;&lt;/asp:Label&gt;
                                                              &lt;/ItemTemplate&gt;
                                                              &lt;FooterStyle BackColor="#0061C1" /&gt;
                                                              &lt;HeaderStyle BackColor="#0061C1" ForeColor="White"   /&gt;
                                                              &lt;ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" /&gt;
                                                              &lt;/asp:TemplateField&gt;
                                                              &lt;asp:TemplateField HeaderText="Status"&gt;
                                                              &lt;ItemTemplate&gt;
                                                              &lt;asp:Label 
                                                                      ID="Status" runat="server" Font-Names="Verdana" Font-Size="X-Small" 
                                                                      Height="20px" Text='&lt;%# Eval("Status")%&gt;' Width="60px"&gt;&lt;/asp:Label&gt;
                                                              &lt;/ItemTemplate&gt;
                                                              &lt;FooterStyle BackColor="#0061C1" /&gt;
                                                              &lt;HeaderStyle BackColor="#0061C1" ForeColor="White"  /&gt;
                                                              &lt;ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" /&gt;
                                                              &lt;/asp:TemplateField&gt;
                                                              &lt;asp:TemplateField HeaderText="% Complete"&gt;
                                                              &lt;ItemTemplate&gt;
                                                              &lt;asp:Label 
                                                                      ID="PercentageComplete" runat="server" Font-Names="Verdana" Font-Size="X-Small" 
                                                                      Height="20px" Text='&lt;%# Eval("PercentageComplete")%&gt;' Width="70px"&gt;&lt;/asp:Label&gt;
                                                              &lt;/ItemTemplate&gt;
                                                              &lt;FooterStyle BackColor="#0061C1" /&gt;
                                                              &lt;HeaderStyle BackColor="#0061C1" ForeColor="White"  /&gt;
                                                              &lt;ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" /&gt;
                                                              &lt;/asp:TemplateField&gt;
                                                              &lt;asp:TemplateField HeaderText="View Details"&gt;
                                                              &lt;ItemTemplate&gt;
                                                              &lt;asp:HyperLink 
                                                                      ID="ViewDetails" runat="server" DataNavigateUrlFields="TaskID" 
                                                                      DataNavigateUrlFormatString="Reports.aspx?TaskID={0}" Font-Names="Verdana" 
                                                                      Font-Size="X-Small" ForeColor="#0061C1" Height="24px" Width="70px"
                                                                      NavigateUrl="Reports.aspx" Text="ViewDetails" &gt;View&lt;/asp:HyperLink&gt;
                                                              &lt;/ItemTemplate&gt;
                                                              &lt;FooterStyle BackColor="#0061C1" /&gt;
                                                              &lt;HeaderStyle BackColor="#0061C1" ForeColor="White"   /&gt;
                                                              &lt;ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" /&gt;
                                                              &lt;/asp:TemplateField&gt;
                                                          &lt;/Columns&gt;
                                                      &lt;/asp:GridView&gt;
                                                      &lt;/div&gt;
  
                    &lt;style type="text/css"&gt;
  
                    .Container
                      {
                          overflow: auto;
                       }
        &lt;script src="jquery-1.4.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script src="ScrollableGrid.js" type="text/javascript"&gt;&lt;/script&gt;
  
         &lt;script type="text/javascript" language="javascript"&gt;
            $(document).ready(function () {
             $('#&lt;%=GrdViewMyTasks.ClientID %&gt;').Scrollable();
             }
             )
                 &lt;/script&gt;
  </code></pre>
  
  <p>header gets frixed but d grid view width has shortened and header size has been increased.. it dsnt gets fit with d div tag .. i have placed my grid view code and jquery file </p>