title: How to fix the bootstrap-table header?
body: <p>I've data inside a bootstrap table. As the rows increases, the header will be out of sight on vertical scroll. So I need to fix the header of the bootstrap table with table body vertical scrollable. Also,the horizontal scroll for the whole table when columns exceed in the page.</p>
  
  <p><a href="http://joshondesign.com/p/projects/css-tables-demo/test1.html" rel="nofollow">Reference implementation without bootstrap</a>.This is implemented by using two tables. One for header and the other for body.</p>
  
  <p>I've the following data which is similar to my original data.</p>
  
  <p><em>NOTE</em>:I am not using any <code>col-*-*</code> for <code>table</code>'s <code>td</code>. Because my header columns are more than 12. And may increase up to 15. So I don't use the column classes.</p>
  
  <p><strong>HTML</strong>
      
        </p>
  
  <pre><code>    &lt;tbody&gt;
        &lt;tr&gt;
          &lt;th style="cursor: pointer;"&gt;
            ABCD
          &lt;/th&gt;
          &lt;th style="cursor: pointer;"&gt;
            Asadh uysdsgh
          &lt;/th&gt;
          &lt;th style="cursor: pointer;"&gt;
            ghdsgsh sdfsdjsd
          &lt;/th&gt;
          &lt;th style="cursor: pointer;"&gt;
            sdagfh sdhfsjk
          &lt;/th&gt;
          &lt;th style="cursor: pointer;"&gt;
            sdhfasgh sdjkj
          &lt;/th&gt;
          &lt;th style="display: none; cursor: pointer;"&gt;
            shadfj sjdskdl
          &lt;/th&gt;
          &lt;th style="cursor: pointer;"&gt;
            sddgjgfhgshdf skldj
          &lt;/th&gt;
          &lt;th style="cursor: pointer;"&gt;
            sdfsffsd sdfsd
          &lt;/th&gt;
          &lt;th style="cursor: pointer;"&gt;
            sdfsd sdfsd
          &lt;/th&gt;
          &lt;th style="cursor: pointer;"&gt;
            fhgdd sdg sfs fsfsffsd sdfffs
          &lt;/th&gt;
          &lt;th style="cursor: pointer;"&gt;
            fsdfsd dvf ffff
          &lt;/th&gt;
          &lt;th style="cursor: pointer;"&gt;
            fsdfsd dvf ffff
          &lt;/th&gt;
          &lt;th style="cursor: pointer;"&gt;
            sfgasad sdfjhjshj
          &lt;/th&gt;
          &lt;th style="cursor: pointer;"&gt;&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            579852
          &lt;/td&gt;
          &lt;td&gt;
            21June_The hhjhj bhjhhkj
          &lt;/td&gt;
          &lt;td&gt;
            US jhgg
          &lt;/td&gt;
          &lt;td&gt;
            sdafss
          &lt;/td&gt;
          &lt;td&gt;
            sdfsdfssd
          &lt;/td&gt;
          &lt;td style="display: none;"&gt;
            No
          &lt;/td&gt;
          &lt;td&gt;
            sfdf ,sdffssd,sdfhshdj,
          &lt;/td&gt;
          &lt;td&gt;
            Acsadfds
          &lt;/td&gt;
          &lt;td&gt;
            06/30/2016
          &lt;/td&gt;
          &lt;td&gt;
            0
          &lt;/td&gt;
          &lt;td&gt;
            sfasd
          &lt;/td&gt;
          &lt;td&gt;
            06/30/2016
          &lt;/td&gt;
          &lt;td&gt;
            sdasd
          &lt;/td&gt;
          &lt;td&gt;
            &lt;a target="_blank" class="linkth"&gt;Preview&amp;nbsp;&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            579850
          &lt;/td&gt;
          &lt;td&gt;
            sdfff sdfabsd sjd &lt;/td&gt;
          &lt;td&gt;
            US asdfd
          &lt;/td&gt;
          &lt;td&gt;
            sdfsdsdsd
          &lt;/td&gt;
          &lt;td&gt;
            sdfsfdfas
          &lt;/td&gt;
          &lt;td style="display: none;"&gt;
            No
          &lt;/td&gt;
          &lt;td&gt;
            sdhafasdjfj sdhfasdsf,
          &lt;/td&gt;
          &lt;td&gt;
            sdfsdsda
          &lt;/td&gt;
          &lt;td&gt;
            06/30/2016
          &lt;/td&gt;
          &lt;td&gt;
            0
          &lt;/td&gt;
          &lt;td&gt;
            sdhafasdjfj sdhfasdsf
          &lt;/td&gt;
          &lt;td&gt;
            07/04/2016
          &lt;/td&gt;
          &lt;td&gt;
            sdhafasdjfj sdhfasdsf
          &lt;/td&gt;
          &lt;td&gt;
            &lt;a target="_blank" class="linkth"&gt;Preview&amp;nbsp;&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            579893
          &lt;/td&gt;
          &lt;td&gt;
            sdhafasdjfj sdhfasdsf sdfha sdfsfh
          &lt;/td&gt;
          &lt;td&gt;
            US sdfsdfgl
          &lt;/td&gt;
          &lt;td&gt;
            dfsjsdsd
          &lt;/td&gt;
          &lt;td&gt;
            sdfdfjk
          &lt;/td&gt;
          &lt;td style="display: none;"&gt;
            No
          &lt;/td&gt;
          &lt;td&gt;
            sdhafasdjfj sdhfasdsf
          &lt;/td&gt;
          &lt;td&gt;
            sdfgagf
          &lt;/td&gt;
          &lt;td&gt;
            06/30/2016
          &lt;/td&gt;
          &lt;td&gt;
            0
          &lt;/td&gt;
          &lt;td&gt;
            sdhafasdjfj sdhfasdsf
          &lt;/td&gt;
          &lt;td&gt;
            06/28/2016
          &lt;/td&gt;
          &lt;td&gt;
            sdhafasdjfj sdhfasdsf
          &lt;/td&gt;
          &lt;td&gt;
            &lt;a target="_blank" class="linkth"&gt;Preview&amp;nbsp;&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            545554
          &lt;/td&gt;
          &lt;td&gt;
            jhsdfg sdfhh sdafjh
          &lt;/td&gt;
          &lt;td&gt;
            US sdfhhdf
          &lt;/td&gt;
          &lt;td&gt;
            sdfadilgf
          &lt;/td&gt;
          &lt;td&gt;
            tadil
          &lt;/td&gt;
          &lt;td style="display: none;"&gt;
            No
          &lt;/td&gt;
          &lt;td&gt;
            sdhafasdjfj sdhfasdsf
          &lt;/td&gt;
          &lt;td&gt;
            tadil
          &lt;/td&gt;
          &lt;td&gt;
            08/08/2003
          &lt;/td&gt;
          &lt;td&gt;
            0
          &lt;/td&gt;
          &lt;td&gt;
            sdhafasdjfj sdhfasdsf
          &lt;/td&gt;
          &lt;td&gt;
            06/29/2016
          &lt;/td&gt;
          &lt;td&gt;
            sdhafasdjfj sdhfasdsf
          &lt;/td&gt;
          &lt;td&gt;
            &lt;a target="_blank" class="linkth"&gt;Preview&amp;nbsp;&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            579892
          &lt;/td&gt;
          &lt;td&gt;
            sadfs asdfhds dbsh dfsdh
          &lt;/td&gt;
          &lt;td&gt;
            US tadil
          &lt;/td&gt;
          &lt;td&gt;
            sddftadil
          &lt;/td&gt;
          &lt;td&gt;
            fftadil
          &lt;/td&gt;
          &lt;td style="display: none;"&gt;
            No
          &lt;/td&gt;
          &lt;td&gt;
            sdhafasdjfj sdhfasdsf
          &lt;/td&gt;
          &lt;td&gt;
            Active
          &lt;/td&gt;
          &lt;td&gt;
            06/30/2016
          &lt;/td&gt;
          &lt;td&gt;
            0
          &lt;/td&gt;
          &lt;td&gt;
            tadil fsddf
          &lt;/td&gt;
          &lt;td&gt;
            06/29/2016
          &lt;/td&gt;
          &lt;td&gt;
            sdhafasdjfj sdhfasdsf
          &lt;/td&gt;
          &lt;td&gt;
            &lt;a target="_blank" class="linkth"&gt;Preview&amp;nbsp;&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            579855
          &lt;/td&gt;
          &lt;td&gt;
            jsdhfsdfb dfs bsdhfdjs bsdhbh
          &lt;/td&gt;
          &lt;td&gt;
            US tadil
          &lt;/td&gt;
          &lt;td&gt;
            sdftadil
          &lt;/td&gt;
          &lt;td&gt;
            fjtadil
          &lt;/td&gt;
          &lt;td style="display: none;"&gt;
            No
          &lt;/td&gt;
          &lt;td&gt;
            sdhafasdjfj sdhfasdsf
          &lt;/td&gt;
          &lt;td&gt;
            tadil
          &lt;/td&gt;
          &lt;td&gt;
            06/30/2016
          &lt;/td&gt;
          &lt;td&gt;
            0
          &lt;/td&gt;
          &lt;td&gt;
          &lt;/td&gt;
          &lt;td&gt;
            06/21/2016
          &lt;/td&gt;
          &lt;td&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;a target="_blank" class="linkth"&gt;Preview&amp;nbsp;&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            579851
          &lt;/td&gt;
          &lt;td&gt;
            asdhshj- jd dsjsh jjsd
          &lt;/td&gt;
          &lt;td&gt;
            US tadil
          &lt;/td&gt;
          &lt;td&gt;
            tadil
          &lt;/td&gt;
          &lt;td&gt;
            Retail
          &lt;/td&gt;
          &lt;td style="display: none;"&gt;
            No
          &lt;/td&gt;
          &lt;td&gt;
            sdhafasdjfj sdhfasdsf
          &lt;/td&gt;
          &lt;td&gt;
            tadil
          &lt;/td&gt;
          &lt;td&gt;
            06/30/2016
          &lt;/td&gt;
          &lt;td&gt;
            0
          &lt;/td&gt;
          &lt;td&gt;
            sdhafasdjfj sdhfasdsf
          &lt;/td&gt;
          &lt;td&gt;
            06/29/2016
          &lt;/td&gt;
          &lt;td&gt;
            sdhafasdjfj sdhfasdsf
          &lt;/td&gt;
          &lt;td&gt;
  
            &lt;a target="_blank" class="linkth"&gt;Preview&amp;nbsp;&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
  
  
  
          &lt;td&gt;
            579842
          &lt;/td&gt;
          &lt;td&gt;
  
            Test sdhfhad bsdbh
          &lt;/td&gt;
  
  
          &lt;td&gt;
            US English
          &lt;/td&gt;
          &lt;td&gt;
            Internal
          &lt;/td&gt;
          &lt;td&gt;
            tadil
          &lt;/td&gt;
          &lt;td style="display: none;"&gt;
            No
          &lt;/td&gt;
  
  
          &lt;td&gt;
            sdfffa ,dsjfjs,
          &lt;/td&gt;
          &lt;td&gt;
            Active
          &lt;/td&gt;
          &lt;td&gt;
            06/30/2016
          &lt;/td&gt;
  
  
          &lt;td&gt;
            0
          &lt;/td&gt;
          &lt;td&gt;
            sdafsfsd
          &lt;/td&gt;
          &lt;td&gt;
            07/01/2016
          &lt;/td&gt;
          &lt;td&gt;
            asdff
          &lt;/td&gt;
          &lt;td&gt;
  
            &lt;a target="_blank" class="linkth"&gt;Preview&amp;nbsp;&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><kbd><a href="https://jsfiddle.net/6zwdg1nu/" rel="nofollow">Fiddle</a></kbd></p>
  
  <p><kbd><a href="http://jsfiddle.net/vmqjnjc8/" rel="nofollow">Fiddle</a></kbd> by using the provided link of the original question.</p>
  
  <p>Just look at the above fiddle, when there are more headers,table gets distorted.</p>