title: Set header width and column properly during freeze the header in gridview
body: <p>I want to have a gridview with fixed header . I tried this <a href="http://www.aspdotnet-suresh.com/2011/11/how-to-implement-scrollable-gridview.html" rel="nofollow noreferrer">link</a> and <a href="http://www.codeproject.com/Articles/250669/Gridview-with-Fixed-Header" rel="nofollow noreferrer">this</a></p>
  
  <p>I was able to do it all the time but there was problem with grid header width and columns width not being set equally. So it doesn't look good but scroll and freeze does work properly.If i don't use freeze logic then header width appears proper.</p>
  
  <p>When i observed the code and compared with mine i found that they used to set columns in the design it self where as i don't specify columns in design and I set SQL data source from code behind and column are set as a part of SQL data source.So in design i have </p>
  
  <pre><code> &lt;form id="form1" runat="server"&gt;
    &lt;div&gt;
  
    &lt;/div&gt;
  
     &lt;asp:GridView ID="GridView1" runat="server" Font-Size=12px CellPadding="4" 
      ForeColor="#333333" GridLines="Vertical"&gt;
  
     &lt;RowStyle BackColor="#F7F6F3" ForeColor="#333333" /&gt;
      &lt;FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /&gt;
      &lt;PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /&gt;
      &lt;SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /&gt;
      &lt;HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /&gt;
      &lt;EditRowStyle BackColor="#999999" /&gt;
      &lt;AlternatingRowStyle BackColor="White" ForeColor="#284775" /&gt;
     &lt;/asp:GridView&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>here is a screenshot which shows the problem(You can observe the change in header width and columns)</p>
  
  <p><img src="https://i.stack.imgur.com/iNKRe.png" alt="enter image description here">
  But the example given in those links have  tags and column names specified. So is this the problem?</p>
  
  <p>How can i solve my problem? How can i set header width to same as column width.</p>
  
  <p><strong>edit:</strong></p>
  
  <p>Below is the rendered HTML of the page (but this HTML shows some what different than what asp page shows in browser. 1st row shown like shifted in HTML,but proper in asp. But header issue still exists in both)</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  
  &lt;script src="./Scrollable Gridview with Fixed Header_files/jquery-1.4.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="./Scrollable Gridview with Fixed Header_files/ScrollableGridPlugin.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;title&gt;
  Scrollable Gridview with Fixed Header
  &lt;/title&gt;
  &lt;script type="text/javascript" language="javascript"&gt;
  $(document).ready(function() {
  $('#GridView1').Scrollable();
  }
  )
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form name="form1" method="post" action="./Scrollable Gridview with Fixed Header_files/Scrollable Gridview with Fixed Header.htm" id="form1"&gt;
  &lt;div&gt;
  &lt;input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/"&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
  
  &lt;/div&gt;
  
  
      &lt;div&gt;
  
  &lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;table cellspacing="0" cellpadding="4" rules="cols" border="1" style="color: rgb(51, 51, 51); font-size: 12px; width: 900px; border-collapse: collapse;"&gt;&lt;tbody&gt;&lt;tr style="color:White;background-color:#5D7B9D;font-weight:bold;"&gt;
          &lt;th scope="col" style="width: 105px;"&gt;name&lt;/th&gt;&lt;th scope="col" style="width: 241px;"&gt;Status&lt;/th&gt;&lt;th scope="col" style="width: 59px;"&gt;Error&lt;/th&gt;&lt;th scope="col" style="width: 96px;"&gt;No.&lt;/th&gt;&lt;th scope="col" style="width: 37px;"&gt;date&lt;/th&gt;&lt;th scope="col" style="width: 100px;"&gt;date1&lt;/th&gt;&lt;th scope="col" style="width: 59px;"&gt;Received&lt;/th&gt;&lt;th scope="col" style="width: 51px;"&gt;time1&lt;/th&gt;&lt;th scope="col" style="width: 100px;"&gt;time2&lt;/th&gt;&lt;th scope="col" style="width: 22px;"&gt;AY&lt;/th&gt;&lt;th scope="col" style="width: 26px;"&gt;we&lt;/th&gt;&lt;th scope="col" style="width: 84px;"&gt;Setft&lt;/th&gt;
      &lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;div style="overflow: auto; height: 200px; width: 917px;"&gt;&lt;table cellspacing="0" cellpadding="4" rules="cols" border="1" id="GridView1" style="color:#333333;font-size:12px;width:900px;border-collapse:collapse;"&gt;
      &lt;tbody&gt;&lt;tr style="color:#333333;background-color:#F7F6F3;"&gt;
          &lt;td style="width: 105px;"&gt;Sews&lt;/td&gt;&lt;td style="width: 241px;"&gt;fggghtg&lt;/td&gt;&lt;td style="width: 59px;"&gt;thtthgtrtht&lt;/td&gt;&lt;td style="width: 96px;"&gt;&amp;nbsp;&lt;/td&gt;&lt;td style="width: 37px;"&gt;&amp;nbsp;&lt;/td&gt;&lt;td style="width: 100px;"&gt;&amp;nbsp;&lt;/td&gt;&lt;td style="width: 59px;"&gt;17:52:53&lt;/td&gt;&lt;td style="width: 51px;"&gt;&amp;nbsp;&lt;/td&gt;&lt;td style="width: 100px;"&gt;&amp;nbsp;&lt;/td&gt;&lt;td style="width: 22px;"&gt;14-15&lt;/td&gt;&lt;td style="width: 26px;"&gt;1&lt;/td&gt;&lt;td style="width: 84px;"&gt;sdgg&lt;/td&gt;
      &lt;/tr&gt;&lt;tr style="color:#284775;background-color:White;"&gt;
          &lt;td&gt;Ses&lt;/td&gt;&lt;td&gt;dffggg&lt;/td&gt;&lt;td&gt;Invalid &lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;18:00:31&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;14-15&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;DtyuFGtyuty&lt;/td&gt;
      &lt;/tr&gt;&lt;tr style="color:#333333;background-color:#F7F6F3;"&gt;
          &lt;td&gt;Ses&lt;/td&gt;&lt;td&gt;qwerty&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;18:03:42&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;14-15&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;yuutyutu&lt;/td&gt;
      &lt;/tr&gt;&lt;tr style="color:#284775;background-color:White;"&gt;
          &lt;td&gt;rttty N&lt;/td&gt;&lt;td&gt;dffggg&lt;/td&gt;&lt;td&gt;Invalid &lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;20:31:14&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;14-15&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;tyuutu&lt;/td&gt;
      &lt;/tr&gt;&lt;tr style="color:#333333;background-color:#F7F6F3;"&gt;
          &lt;td&gt;tyu tyu tyu&lt;/td&gt;&lt;td&gt;qwerty&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;17:37:02&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;14-15&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;tyutu&lt;/td&gt;
      &lt;/tr&gt;&lt;tr style="color:#284775;background-color:White;"&gt;
          &lt;td&gt;tyu tyu tyu&lt;/td&gt;&lt;td&gt;rerty tht.&lt;/td&gt;&lt;td&gt;Invalid&lt;/td&gt;
          &lt;td&gt;ytutyutu&lt;/td&gt;&lt;td&gt;13-08-2014&lt;/td&gt;&lt;td&gt;13-08-2014&lt;/td&gt;&lt;td&gt;11:43:23&lt;/td&gt;&lt;td&gt;10:37:26&lt;/td&gt;&lt;td&gt;10:37:26&lt;/td&gt;&lt;td&gt;14-15&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;tyuutyty&lt;/td&gt;
      &lt;/tr&gt;&lt;tr style="color:#333333;background-color:#F7F6F3;"&gt;
          &lt;td&gt;Testing&lt;/td&gt;&lt;td&gt;qwerty&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;11:45:34&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;14-15&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;tyutyu&lt;/td&gt;
      &lt;/tr&gt;&lt;tr style="color:#284775;background-color:White;"&gt;
          &lt;td&gt;Testing&lt;/td&gt;&lt;td&gt;qwerty&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;11:48:22&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;14-15&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;tyuutut&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;/form&gt;
  
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>