Scroll table (but not thead)

Question

I have a (long) Bootstrap table for which I want to allow for scrolling with overflow: auto;. I only want the tbody to be scrollable, not thead content.

Please see this fiddle for my attempt. I have tried to set a height on tbody unsuccessfully.

That will be a fierce battle to win, bootstrap aside thats actually hard to accomplish, specially cross-browser. Anyways it has been discussed lots of times here like in: http://stackoverflow.com/questions/1019938/make-tbody-scrollable-in-webkit-browsers . A quick search on google will yield several javascript solutions and also many pure CSS ones that will probably work in most browsers ... all of those solutions won't be clean as expected. — mfreitas, Feb 04 '13 at 22:56

score 5 · Accepted Answer · edited Sep 19 '13 at 21:35

You can't set tbody as scrollable. You need to create two separate tables -- one for the header and one for the body. Wrap the body table in a div and set the overflow-y property to scroll.

Updated jsfiddle: http://jsfiddle.net/SzGW3/37/

Markup:

<div class="scrollable">
    <table class="table table-hover table-striped">
        <thead>
            <tr>
                <th>User</th>
                <th>Rights</th>
                <th></th>
            </tr>
        </thead>
    </table>
</div>
<div class="bodycontainer scrollable">
    <table class="table table-hover table">
        <tbody id="user-rows">
            <tr class="user-row" style="opacity: 1;">
                <td>Justin</td>
                <td>Administrator</td>
                <td><span class="btn btn-mini btn-primary edit pull-right fade">Edit</span>
                </td>
            </tr>
            <tr class="user-row" style="opacity: 1;">
                <td>Sebastien</td>
                <td>Administrator</td>
                <td><span class="btn btn-mini btn-primary edit pull-right fade">Edit</span>
                </td>
            </tr>
            <tr class="user-row" style="opacity: 1;">
                <td>Steve</td>
                <td>Operator</td>
                <td><span class="btn btn-mini btn-primary edit pull-right fade">Edit</span>
                </td>
            </tr>
            <tr class="user-row" style="opacity: 1;">
                <td>Thomas</td>
                <td>Administrator</td>
                <td><span class="btn btn-mini btn-primary edit pull-right fade">Edit</span>
                </td>
            </tr>
            <tr class="user-row" style="opacity: 1;">
                <td>admin</td>
                <td>Administrator</td>
                <td><span class="btn btn-mini btn-primary edit pull-right fade">Edit</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Style:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.scrollable {
    overflow-y: scroll;
}

.bodycontainer {
    height: 100px !important;
    width: 100%;
}

The scroll bar on the header is to keep the widths the same. You can fix that with some JavaScript, but there should also be some nice JS / JQuery libraries you can find to handle the entire tbody scrolling issue for you.

If you want to set the same width for header cols (th) and cols (td):

table thead>tr>th{
    width: 20% !important; /* 20% for 5, 25% for 4, etc */

}

table tbody>tr>td{
    width: 20% !important; /* 20% for 5, 25% for 4, etc */
}

The problem with this solution is the width. TD from TR will not have the same width of TD from TH. — Bagata, Sep 19 '13 at 20:31

DJ. · Answer 2 · 2013-02-04T23:13:00.057

This might be helpful in your case:

http://www.novasoftware.com/download/jquery_fixedtable/jquery_fixedtable.aspx

Also i give a try at fiddle it could give you a hint:

One single row and column and a div inside with overflow:auto and a fixed height and another table inside:

<tbody id="user-rows">
   <tr>
     <td>
        <div style="overflow:auto; height:10em; width:20em;">
          <table >
              <tr>
               .
               .
               . 
              </tr>
          </table>

Scroll table (but not thead)

2 Answers2