title: rows of bootstrap header and body not aligning properly in bootstrap responsive table
body: <p>Here i have created a responsive bootstrap table where i want to add rows dynamically for which i am using jquery. But table body rows are not aligning properly with their respective headers as shown below</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var rows = "";
    var a = "test code";
  
    $("#add_row").click(function() {
  
      rows += "&lt;tr&gt;&lt;td&gt;" + a + "&lt;/td&gt;&lt;td&gt;" + a + "&lt;/td&gt;&lt;td&gt;" + a + "&lt;/td&gt;&lt;td&gt;" + a + "&lt;/td&gt;&lt;td&gt;" + a + "&lt;/td&gt;&lt;td&gt;" + a + "&lt;/td&gt;&lt;td&gt;" + a + "&lt;/td&gt;&lt;td&gt;" + a + "&lt;/td&gt;&lt;td&gt;" + a + "&lt;/td&gt;&lt;td&gt;" + a + "&lt;/td&gt;&lt;/tr&gt;";
      $(rows).appendTo("#myTable3 tbody");
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#myTable3 th {
    background-color: #009999;
    color: white;
  }
  
  .table-fixed {}
  
  #myTable3 tbody {
    height: 100px;
    overflow: auto;
  }
  
  #myTable3 thead,
  .tbody {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="table-responsive"&gt;
    &lt;div class="row clearfix"&gt;
  
      &lt;table class="table table-striped table-bordered table-fixed table-hover table-condensed" style="border:0px; " id="myTable3"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th width=""&gt;FileNo&lt;/th&gt;
            &lt;th width=""&gt;Height&lt;/th&gt;
            &lt;th width=""&gt;Weight&lt;/th&gt;
            &lt;th width=""&gt;Temperature&lt;/th&gt;
            &lt;th width=""&gt;Abdominal Circumference&lt;/th&gt;
            &lt;th width=""&gt;Blood Pressure&lt;/th&gt;
            &lt;th width=""&gt;Pulse&lt;/th&gt;
            &lt;th width=""&gt;BMI&lt;/th&gt;
            &lt;th width=""&gt;Chest Circumference&lt;/th&gt;
            &lt;th width=""&gt;Time Recorded&lt;/th&gt;
  
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody class="tbody"&gt;
  
        &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;a id="add_row" class="btn btn-default pull-left"&gt;Add Row&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Above is the snippet which explains the above problem. But i have used display block for thead and tbody to obtain scroll for tbody. If i remove display block section in css, alignment of tbody and thead works properly, but i need scroll for tbody.</p>
  
  <p>Please Help me
  Thanks</p>