CODEWITHSUNDEEP
javascripttwitter-bootstrap
Randomblue
Randomblue

Reputation: 116273

Scroll table (but not thead)

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.

Upvotes: 3

Views: 8630

Answers (2)

Sahil Grover
Sahil Grover

Reputation: 219

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 */
}

Upvotes: 5

DJ.
DJ.

Reputation: 528

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>

Upvotes: 0

Related Questions