title: Fix header when scrolling with bootstrap
body: <p><a href="https://i.stack.imgur.com/jLeOe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jLeOe.png" alt="enter image description here"></a>I have a large bootstrap table, when i try to fix the header the table is distorted, but header is fixed. As a result some rows get stacked over that make the table become distorted. This is my fiddle : <a href="https://jsfiddle.net/1veu9gz3/" rel="nofollow noreferrer">https://jsfiddle.net/1veu9gz3/</a></p>
  
  <p>How can fix this ? </p>
  
  <p>css</p>
  
  <pre><code>    .table-fixed tbody {
      height: 200px;
      overflow-y: auto;
      width: 100%;
      }
      .table-fixed thead,
      .table-fixed tbody,
      .table-fixed tr,
      .table-fixed td,
      .table-fixed th {
      display: block;
      }
      .table-fixed tr:after {
      content: "";
      display: block;
      visibility: hidden;
      clear: both;
      }
      .table-fixed tbody td,
      .table-fixed thead &gt; tr &gt; th {
      float: left;
      }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>    &lt;table class="table table-bordered table-fixed" &gt;
       &lt;thead&gt;
      &lt;tr&gt;
      &lt;th&gt;Fecha de la consulta&lt;/th&gt;
      &lt;th&gt;Semana de amenorrea&lt;/th&gt;
      &lt;th&gt;Peso (lb)&lt;/th&gt;
      &lt;th&gt;Tension Arterial Max.Min. (mm Hg)&lt;/th&gt;
      &lt;th&gt;Alt. Ulterina/Present Pubis.FondoCef/Pelv.Tr&lt;/th&gt;
      &lt;th&gt;F.C.F.(lat./min./Mov.Fetal)&lt;/th&gt;
      &lt;th&gt;Edema / Varices&lt;/th&gt;
      &lt;th&gt;Otros&lt;/th&gt;
      &lt;th&gt;Evolucion&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tr&gt;
      &lt;td&gt;&lt;input type="text"  size="10"  /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text"  size="10"  /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text"  size="10"  /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div class="input-group" &gt;&lt;input style="width:50px" class="form-control reduce-height" type="text"   /&gt; &lt;span class="input-group-addon reduce-height" &gt;-&lt;/span&gt; &lt;input  type="text" class="form-control reduce-height" style="width:50px" /&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div class="input-group" &gt; &lt;input style="width:50px" class="form-control reduce-height" type="text"   /&gt; &lt;span class="input-group-addon reduce-height" &gt;-&lt;/span&gt; &lt;input  type="text" class="form-control reduce-height" style="width:50px" /&gt;&lt;span class="input-group-addon reduce-height" &gt;-&lt;/span&gt;&lt;input  type="text" class="form-control reduce-height" style="width:50px" /&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div class="input-group" &gt;&lt;input style="width:50px" class="form-control reduce-height" type="text"   /&gt; &lt;span class="input-group-addon reduce-height" &gt;-&lt;/span&gt; &lt;input  type="text" class="form-control reduce-height" style="width:50px" /&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div class="input-group" &gt;&lt;input style="width:50px" class="form-control reduce-height" type="text"   /&gt; &lt;span class="input-group-addon reduce-height" &gt;-&lt;/span&gt; &lt;input  type="text" class="form-control reduce-height" style="width:50px" /&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;textarea style="width:150px" class="form-control" cols="20"&gt;&lt;/textarea&gt;&lt;/td&gt;
      &lt;td&gt;&lt;textarea style="width:150px" class="form-control" cols="20"&gt;&lt;/textarea&gt;&lt;/td&gt;
      &lt;/tr&gt; 
      &lt;tr&gt;
       .
       .
       .
       &lt;/table&gt;
  </code></pre>