Twitter bootstrap scrollable table
Table elements don't appear to support this directly. Place the table in a div and set the height of the div and set overflow: auto
.
I had the same issue and used a combination of the above solutions (and added a twist of my own). Note that I had to specify column widths to keep them consistent between header and body.
In my solution, the header and footer stay fixed while the body scrolls.
<div class="table-responsive">
<table class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th width="25%">First Name</th>
<th width="13%">Last Name</th>
<th width="25%" class="text-center">Address</th>
<th width="25%" class="text-center">City</th>
<th width="4%" class="text-center">State</th>
<th width="8%" class="text-center">Zip</th>
</tr>
</thead>
</table>
<div class="bodycontainer scrollable">
<table class="table table-hover table-striped table-condensed table-scrollable">
<tbody>
<!-- add rows here, specifying same widths as in header, at least on one row -->
</tbody>
</table>
</div>
<table class="table table-hover table-striped table-condensed">
<tfoot>
<!-- add your footer here... -->
</tfoot>
</table>
</div>
And then just applied the following CSS:
.bodycontainer { max-height: 450px; width: 100%; margin: 0; overflow-y: auto; }
.table-scrollable { margin: 0; padding: 0; }
I hope this helps someone else.
Don't need the wrap it in a div...
CSS:
tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}
table{
height:300px; // <-- Select the height of the table
display: -moz-groupbox; // Firefox Bad Effect
}
tbody{
overflow-y: scroll;
height: 200px; // <-- Select the height of the body
width: 100%;
position: absolute;
}
Bootply : http://www.bootply.com/AgI8LpDugl
.span3 {
height: 100px !important;
overflow: scroll;
}
You'll want to wrap it in it's own div or give that span3 an id of it's own so you don't affect your whole layout.
Here's a fiddle: http://jsfiddle.net/zm6rf/