bootstrap table responsive head fixed body scrollable
<p>I am using bootstrap 3 to make my site responsive and I have a table with a div that is "table-responsive". I want a table that allows me to scroll vertically when the screen is small but it also needs to scroll horizontally because their are over 50 items in the table. How can I get the table to be scrollable and responsive?</p>

<p>I am trying this css but the table grows and is not scrolling horizontally...</p>

<pre><code>application.css.scss

  //table becomes responsive with scrollbar
  .table-responsive {
   width: 100%;
   height: 200px !important;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar;
   border: 1px solid #DDD;
  }
</code></pre>

<p>The above css works but the head needs to be fixed above the scrolling body.</p>

<pre><code>html

&lt;div class= "container"&gt;
 &lt;div class="table-responsive"&gt;
  &lt;table class="table table-colored table-hover table-bordered"&gt;
   &lt;thead&gt;
    &lt;tr&gt;
      &lt;th width="20%"&gt;Applicant's Name&lt;/th&gt;
      &lt;th width="20%"&gt;Applicant's Email&lt;/th&gt;
      &lt;th width="20%"&gt;Date Requested &lt;/th&gt;
      &lt;th width="40%"&gt;Report View/Download&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/thead&gt;
  &lt;tbody&gt;
        &lt;% current_manager.reportapprovals.each do |ra| %&gt;
          &lt;% if ra.report.present? %&gt;
              &lt;tr&gt;
                &lt;td width="20%"&gt;&lt;%= ra.tenant_last_name.truncate(17) %&gt;&lt;/td&gt;
                &lt;td width="20%"&gt;&lt;%= ra.tenant_email.truncate(17) %&gt;&lt;/td&gt;
                &lt;td width="20%"&gt;&lt;%= ra.date_approved %&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;% end %&gt;
        &lt;% end %&gt;
      &lt;/div&gt;
      &lt;% end %&gt;
  &lt;/tbody&gt;
&lt;/div&gt;
&lt;/table&gt;
</code></pre>