Scrollable tbody

Question

I'm looking for a CSS only example of how to keep the <thead> fixed and the <tbody> scrollable. I've searched and found tons of examples, but none are working.

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.

HTML:

<table id='recipient-summary'>
  <thead class='fixed'>
    <tr>
      <th>Live</th>
      <th>Paid</th>
      <th>Dep</th>
      <th>Tran</th>
      <th>Date & Time</th>
      <th>Type</th>
      <th>Name</th>
      <th>Total</th>
   </tr>
 </thead>
 <tbody class='scrollable'>
   <tr>
     <td>Bob Dillian</td>
     <td>Race for the stars</td>
     <td>23 Apr 2015</td>
     <td>$144.54</td>
     <td>$3.99</td>
     <td>Issue Check</td>
     <td>Another element</td>
     <td>Another element</td>
   </tr>
   <tr>
     <td>Bob Dillian</td>
     <td>Race for the stars</td>
     <td>23 Apr 2015</td>
     <td>$144.54</td>
     <td>$3.99</td>
     <td>Issue Check</td>
     <td>Another element</td>
     <td>Another element</td>
   </tr>
   <tr>
     <td>Bob Dillian</td>
     <td>Race for the stars</td>
     <td>23 Apr 2015</td>
     <td>$144.54</td>
     <td>$3.99</td>
     <td>Issue Check</td>
     <td>Another element</td>
     <td>Another element</td>
   </tr>
   <tr>
     <td>Bob Dillian</td>
     <td>Race for the stars</td>
     <td>23 Apr 2015</td>
     <td>$144.54</td>
     <td>$3.99</td>
     <td>Issue Check</td>
     <td>Another element</td>
     <td>Another element</td>
   </tr>
   <tr>
     <td>Bob Dillian</td>
     <td>Race for the stars</td>
     <td>23 Apr 2015</td>
     <td>$144.54</td>
     <td>$3.99</td>
     <td>Issue Check</td>
     <td>Another element</td>
     <td>Another element</td>
   </tr>
 </tbody>
 <tfoot></tfoot>
</table>

CSS:

thead,tbody{ display:block; }
tbody{ height:50px; overflow:auto; }
td{ border:1px solid #777; padding:5px; }

you must check this URL. http://www.imaputz.com/cssStuff/bigFourVersion.html — Kheema Pandey, Mar 27 '14 at 18:07
It sucks, but the trick is that you have to set explicit widths on each of your table's columns (`td:nth-child(k)` and `th:nth-child(k)`) — Brian Driscoll, Mar 27 '14 at 18:11
similar question with lot of discussion here http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody may help you — Pravin W, Mar 27 '14 at 18:18
I guess I was doing it correct. I was trying to avoid explicitly setting the widths for both the thead and the tbody. — William Hagan, Mar 28 '14 at 02:26

score 0 · Answer 1 · answered Mar 31 '14 at 13:01

How about this, although I've only tested this in IE and FF. The only issue I faced was the TH cells will need absolute widths being set but the TBODY doesn't.

<html>
<head>
    <style>
        .scrollable-table
        {
            height: 150px;
            margin-top: 50px;
            overflow: auto;
        }
        .scrollable-table table
        {
            border-collapse: collapse;
            width: 100%;
        }
        .scrollable-table thead
        {
            height: 50px;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }
        .scrollable-table thead th
        {
            height: 50px;
        }
        .scrollable-table tbody
        {

        }
        .scrollable-table tbody td
        {
            border-bottom: 1px solid #999;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="scrollable-table">
        <table>
            <thead>
                <tr>
                    <th>Live</th>
                    <th>Paid</th>
                    <th>Dep</th>
                    <th>Tran</th>
                    <th>Date & Time</th>
                    <th>Type</th>
                    <th>Name</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Bob Dillian</td>
                    <td>Race for the stars</td>
                    <td>23 Apr 2015</td>
                    <td>$144.54</td>
                    <td>$3.99</td>
                    <td>Issue Check</td>
                    <td>Another element</td>
                    <td>Another element</td>
                </tr>
                <tr>
                    <td>Bob Dillian</td>
                    <td>Race for the stars</td>
                    <td>23 Apr 2015</td>
                    <td>$144.54</td>
                    <td>$3.99</td>
                    <td>Issue Check</td>
                    <td>Another element</td>
                    <td>Another element</td>
                </tr>
                <tr>
                    <td>Bob Dillian</td>
                    <td>Race for the stars</td>
                    <td>23 Apr 2015</td>
                    <td>$144.54</td>
                    <td>$3.99</td>
                    <td>Issue Check</td>
                    <td>Another element</td>
                    <td>Another element</td>
                </tr>
                <tr>
                    <td>Bob Dillian</td>
                    <td>Race for the stars</td>
                    <td>23 Apr 2015</td>
                    <td>$144.54</td>
                    <td>$3.99</td>
                    <td>Issue Check</td>
                    <td>Another element</td>
                    <td>Another element</td>
                </tr>
                <tr>
                    <td>Bob Dillian</td>
                    <td>Race for the stars</td>
                    <td>23 Apr 2015</td>
                    <td>$144.54</td>
                    <td>$3.99</td>
                    <td>Issue Check</td>
                    <td>Another element</td>
                    <td>Another element</td>
                </tr>
            </tbody>
            <tfoot></tfoot>
        </table>
    </div>
</body>
</html>

Scrollable tbody

1 Answers1