title: Bootstrap scrollable table with fixed header
body: <p>I want to create a table with a lot of data. To keep it all sorted out, I want the table to be scrollable. I use bootstrap to pimp up the table.
  I know this question is asked before and the solution does work for me, but my table is a mess. See the table on the right for what it looks like. I want it to look more like the table to the left.</p>
  
  <p><a href="https://i.stack.imgur.com/eJ9o2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eJ9o2.png" alt="enter image description here"></a></p>
  
  <p>So what I tried is:</p>
  
  <pre><code>&lt;div class="panel panel-success"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;h3 class="panel-title"&gt;Speciale tarieven buiten 's-Herogenbosch&lt;/h3&gt;
  
          &lt;div class="pull-right"&gt;
                          &lt;span class="clickable filter" data-toggle="tooltip" title="Klik om te zoeken"
                                data-container="body"&gt;
                              &lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;
                          &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;input type="text" class="form-control" id="task-table-filter" data-action="filter"
                 data-filters="#task-table" placeholder="Zoek naar een plaats.."/&gt;
      &lt;/div&gt;
      &lt;table class="table table-hover table-fixed" id="task-table"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
              &lt;th &gt;#&lt;/th&gt;
              &lt;th&gt;Van&lt;/th&gt;
              &lt;th&gt;Naar&lt;/th&gt;
              &lt;th&gt;Normaal&lt;/th&gt;
              &lt;th&gt;Onze prijs&lt;/th&gt;
              &lt;th&gt;Korting&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody class="alignmentp"&gt;
          &lt;tr&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;'s-Hertogenbosch&lt;/td&gt;
              &lt;td&gt;Ammerzoden&lt;/td&gt;
              &lt;td&gt;€ 35,00-&lt;/td&gt;
              &lt;td&gt;€ 24,99-&lt;/td&gt;
              &lt;td&gt;30 %&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;2&lt;/td&gt;
              //etc etc
          &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS I use with this is:</p>
  
  <pre><code>.alignmentp{
  text-align: left !important;
  }
  
  .table-fixed thead {
  width: 97%;
  }
  .table-fixed tbody {
  height: 230px;
  overflow-y: auto;
  width: 100%;
  }
  .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td,     .table-fixed th {
  display: block;
  }
  .table-fixed tbody td, .table-fixed thead &gt; tr&gt; th {
  float: left;
  border-bottom-width: 0;
  }
  </code></pre>
  
  <p>I can fix this table by manually correcting the width and height of each &lt;"tr"> and &lt;"td"> element, but there must be a better way of doing this..</p>