title: How to implement fixed header for table in bootstrap
body: <p>I tried a lot to freeze the header of a table in bootstrap but was not able to find any solution. I tried the code samples from the internet but the design of my table is getting messed up.
  My code follows below:</p>
  
  <p><strong>HTML</strong>
  </p>
  
  <pre><code>&lt;div id="user_list" class="table-responsive"&gt;
     &lt;asp:GridView ID="grdUsersList" runat="server" AutoGenerateColumns="false" CssClass="table table-hover" HeaderStyle-CssClass="info" BorderWidth="0px" GridLines="Horizontal" Width="100%"&gt;
     &lt;/asp:GridView&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS for above div</strong>
  </p>
  
  <pre><code>#user_list {
      overflow:auto;
      border: 1px solid #337AB7;
      max-height: 500px;
  }
  
  #user_list table {
      border-color: #337AB7;
  }
  
  #user_list table th {
      font-weight: bold;
  }
  </code></pre>
  
  <p><strong>Now, finally populating grid dynamically using jquery</strong></p>
  
  <pre><code>$('#ChildContent_grdUsersList').append('&lt;thead&gt;&lt;/thead&gt;');
  $('#ChildContent_grdUsersList thead').append('&lt;tr&gt;&lt;th class="info" style="width: 3%;"&gt;&lt;/th&gt;\
          &lt;th class="info" style="width: 12%;"&gt;Name&lt;/th&gt;\
          &lt;th class="info" style="width: 15%;"&gt;Login ID&lt;/th&gt;\
          &lt;th class="info" style="width: 15%;"&gt;Email ID&lt;/th&gt;\
          &lt;th class="info" style="width: 10%;"&gt;Phone No.&lt;/th&gt;\
          &lt;th class="info" style="width: 13%;"&gt;Designation&lt;/th&gt;\
          &lt;th class="info" style="width: 12%;"&gt;Reporting To&lt;/th&gt;\
          &lt;th class="info" style="width: 10%;"&gt;Business&lt;/th&gt;\
          &lt;th class="info" style="width: 10%;"&gt;User Type&lt;/th&gt;&lt;/tr&gt;');
  
  $.each(response, function (index, itemData) {
      $('#ChildContent_grdUsersList').append('&lt;tr&gt;&lt;td class="text-left"&gt;&lt;input type="radio" id="radio_' + itemData.UserID + '" name="user" class="radio" value="' + itemData.UserID + '" onchange="showVal(this);"&gt;&lt;/input&gt;&lt;/td&gt;\
          &lt;td class="text-left"&gt;' + itemData.UserName + '&lt;/td&gt;\
          &lt;td class="text-left"&gt;' + itemData.LoginId + '&lt;/td&gt;\
          &lt;td class="text-left"&gt;' + itemData.EmailId + '&lt;/td&gt;\
          &lt;td class="text-left"&gt;' + itemData.Phone + '&lt;/td&gt;\
          &lt;td class="text-left"&gt;' + itemData.Designation + '&lt;/td&gt;\
          &lt;td class="text-left"&gt;' + itemData.ReportingTo + '&lt;/td&gt;\
          &lt;td class="text-left"&gt;' + itemData.BusinessAssigned + '&lt;/td&gt;\
          &lt;td class="text-left"&gt;' + itemData.UserType + '&lt;/td&gt;&lt;/tr&gt;');
  });
  </code></pre>
  
  <p>I want to freeze the header of the above table. On applying <code>display:block;</code> to <code>&lt;thead&gt;</code> and <code>&lt;tbody&gt;</code>, the whole design is getting messed up.
  I even tried applying "<em>sticky headers</em>", "<em>freeze headers</em>" kind of plugins but still the headers are not getting fixed.</p>
  
  <p>Please help me.</p>
  
  <p>Thanks.</p>