title: Scrollable tbody
body: <p>I'm looking for a CSS only example of how to keep the <code>&lt;thead&gt;</code> fixed and the <code>&lt;tbody&gt;</code> scrollable.  I've searched and found tons of examples, but none are working.</p>
  
  <p>How do I make this simple table head stay fixed and the table body to scroll.  Everytime I try the body 'squishes' under a single th element or doesn't scroll within the 50px height.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table id='recipient-summary'&gt;
    &lt;thead class='fixed'&gt;
      &lt;tr&gt;
        &lt;th&gt;Live&lt;/th&gt;
        &lt;th&gt;Paid&lt;/th&gt;
        &lt;th&gt;Dep&lt;/th&gt;
        &lt;th&gt;Tran&lt;/th&gt;
        &lt;th&gt;Date &amp; Time&lt;/th&gt;
        &lt;th&gt;Type&lt;/th&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Total&lt;/th&gt;
     &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody class='scrollable'&gt;
     &lt;tr&gt;
       &lt;td&gt;Bob Dillian&lt;/td&gt;
       &lt;td&gt;Race for the stars&lt;/td&gt;
       &lt;td&gt;23 Apr 2015&lt;/td&gt;
       &lt;td&gt;$144.54&lt;/td&gt;
       &lt;td&gt;$3.99&lt;/td&gt;
       &lt;td&gt;Issue Check&lt;/td&gt;
       &lt;td&gt;Another element&lt;/td&gt;
       &lt;td&gt;Another element&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;Bob Dillian&lt;/td&gt;
       &lt;td&gt;Race for the stars&lt;/td&gt;
       &lt;td&gt;23 Apr 2015&lt;/td&gt;
       &lt;td&gt;$144.54&lt;/td&gt;
       &lt;td&gt;$3.99&lt;/td&gt;
       &lt;td&gt;Issue Check&lt;/td&gt;
       &lt;td&gt;Another element&lt;/td&gt;
       &lt;td&gt;Another element&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;Bob Dillian&lt;/td&gt;
       &lt;td&gt;Race for the stars&lt;/td&gt;
       &lt;td&gt;23 Apr 2015&lt;/td&gt;
       &lt;td&gt;$144.54&lt;/td&gt;
       &lt;td&gt;$3.99&lt;/td&gt;
       &lt;td&gt;Issue Check&lt;/td&gt;
       &lt;td&gt;Another element&lt;/td&gt;
       &lt;td&gt;Another element&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;Bob Dillian&lt;/td&gt;
       &lt;td&gt;Race for the stars&lt;/td&gt;
       &lt;td&gt;23 Apr 2015&lt;/td&gt;
       &lt;td&gt;$144.54&lt;/td&gt;
       &lt;td&gt;$3.99&lt;/td&gt;
       &lt;td&gt;Issue Check&lt;/td&gt;
       &lt;td&gt;Another element&lt;/td&gt;
       &lt;td&gt;Another element&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;Bob Dillian&lt;/td&gt;
       &lt;td&gt;Race for the stars&lt;/td&gt;
       &lt;td&gt;23 Apr 2015&lt;/td&gt;
       &lt;td&gt;$144.54&lt;/td&gt;
       &lt;td&gt;$3.99&lt;/td&gt;
       &lt;td&gt;Issue Check&lt;/td&gt;
       &lt;td&gt;Another element&lt;/td&gt;
       &lt;td&gt;Another element&lt;/td&gt;
     &lt;/tr&gt;
   &lt;/tbody&gt;
   &lt;tfoot&gt;&lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>thead,tbody{ display:block; }
  tbody{ height:50px; overflow:auto; }
  td{ border:1px solid #777; padding:5px; }
  </code></pre>