title: Is it possible to show headers while scrolling the gridview
body: <p>I am using Gridview in my application. Grid view is binded with the data from the database with some header text. Now what i would like to have is when i scroll the grid view i would like to show the headers while moving the gridview how can i do this</p>
  
  <p>This is what i wrote <code>McArthey</code></p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
       &lt;link href="StyleSheet2.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
      &lt;asp:Panel ID="pnlWrapper" runat="server" Height="300px" ScrollBars="Vertical" BorderWidth="1px"&gt;                
      &lt;asp:GridView ID="gvTheGrid" runat="server" GridLines="Both" CellPadding="3" CssClass="gvTable" AutoGenerateColumns="false" AllowSorting="true"&gt;                    
          &lt;columns&gt;
              &lt;asp:BoundField DataField="id" HeaderText="id" HeaderStyle-Width="60" ItemStyle-Width="60" /&gt;
          &lt;/columns&gt;
      &lt;/asp:GridView&gt;
  &lt;/asp:Panel&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><code>stylesheet</code> is as follows</p>
  
  <pre><code>TABLE.gvTable
  {
      table-layout:fixed;
  }
  TABLE.gvTable TH
  {    
      position:relative;
      border-top-width:0px;
      border-bottom-color:Black;
      background-color:#F5DEB3;
  }
  </code></pre>
  
  <p>This is my sample source when i run and click on view source</p>
  
  <pre><code>  &lt;div id="pnlWrapper" style="border-width:1px;border-style:solid;height:300px;overflow-y:scroll;"&gt;
   &lt;div&gt;
   &lt;table class="gvTable" cellspacing="0" cellpadding="3" rules="all" border="1" id="gvTheGrid" style="border-collapse:collapse;"&gt;
   &lt;tr&gt;
  &lt;th scope="col" style="width:60px;"&gt;id&lt;/th&gt;
  &lt;/tr&gt;&lt;tr&gt;
  &lt;td style="width:60px;"&gt;10&lt;/td&gt;
  &lt;/tr&gt;&lt;tr&gt;
  &lt;td style="width:60px;"&gt;10&lt;/td&gt;
  &lt;/tr&gt;&lt;tr&gt;
  &lt;td style="width:60px;"&gt;10&lt;/td&gt;
  &lt;/tr&gt;&lt;tr&gt;
  </code></pre>
  
  <p>
     
     </p>
  
  <p>Header shown when page loads</p>
  
  <p><img src="https://i.stack.imgur.com/5gKuT.png" alt="enter image description here"></p>
  
  <p>No header when scrolls down</p>
  
  <p><img src="https://i.stack.imgur.com/KL9AW.png" alt="enter image description here"></p>