fixed header scrollable table with bootstrap

fixed header scrollable table with bootstrap

by santosh chauhan

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="panel panel-default">
    <div class="panel-body">
        <table id="myTable" class="table table-fixedheader table-bordered table-striped">
            <thead>
                <tr>
                    <th width="15%">Column1Column1Column1Column1</th>
                    <th width="15%">Column2</th>
                    <th width="15%">Column3</th>
                    <th width="15%">Column4</th>
                    <th width="40%">Column5</th>
                </tr>
            </thead>
            <tbody style="height:110px">
                <tr>
                    <td width="15%">aaaaaaaaaaa</td>
                    <td width="15%">bbbbbbbbbbb</td>
                    <td width="15%">ccccccccccc</td>
                    <td width="15%">dddddddddddddddddddddddddddddddddddddddddd</td>
                    <td width="40%">eeeeeeeeeee</td>
                </tr>
                <tr>
                    <td width="15%">aaaaaaaaaaa</td>
                    <td width="15%">bbbbbbbbbbb</td>
                    <td width="15%">ccccccccccc</td>
                    <td width="15%">ddddddddddd</td>
                    <td width="40%">eeeeeeeeeee</td>
                </tr>
                <tr>
                    <td width="15%">aaaaaaaaaaa</td>
                    <td width="15%">bbbbbbbbbbb</td>
                    <td width="15%">ccccccccccc</td>
                    <td width="15%">ddddddddddd</td>
                    <td width="40%">eeeeeeeeeee</td>
                </tr>
                <tr>
                    <td width="15%">aaaaaaaaaaa</td>
                    <td width="15%">bbbbbbbbbbb</td>
                    <td width="15%">ccccccccccc</td>
                    <td width="15%">ddddddddddd</td>
                    <td width="40%">eeeeeeeeeee</td>
                </tr>
                <tr>
                    <td width="15%">aaaaaaaaaaa</td>
                ...

CSS

/*
Force table width to 100%
*/
 table.table-fixedheader {
    width: 100%;   
}
/*
Set table elements to block mode.  (Normally they are inline).
This allows a responsive table, such as one where columns can be stacked
if the display is narrow.
*/
 table.table-fixedheader, table.table-fixedheader>thead, table.table-fixedheader>tbody, table.table-fixedheader>thead>tr, table.table-fixedheader>tbody>tr, table.table-fixedheader>thead>tr>th, table.table-fixedheader>tbody>td {
    display: block;
}
table.table-fixedheader>thead>tr:after, table.table-fixedheader>tbody>tr:after {
    content:' ';
    display: block;
    visibility: hidden;
    clear: both;
}
/*
When scrolling the table, actually it is only the tbody portion of the
table that scrolls (not the entire table: we want the thead to remain
fixed).  We must specify an explicit height for the tbody.  We include
100px as a default, but it can be overridden elsewhere.

Also, we force the scrollbar to always be displayed so that the usable
width for the table contents doesn't change (such as becoming narrower
when a scrollbar is visible and wider when it is not).
*/
 table.table-fixedheader>tbody {
    overflow-y: scroll;
    height: 100px;
    
}
/*
We really don't want to scroll the thead contents, but we want to force
a scrollbar to be displayed anyway so that the usable width of the thead
will exactly match the tbody.
*/
 table.table-fixedheader>thead {
    overflow-y: scroll;    
}
/*
For browsers that support it (webkit), we set the background color of
the unneeded scrollbar in the thead to make it invisible.  (Setting
visiblity: hidden defeats the purpose, as this alters the usable width
of the thead.)
*/
 table.table-fixedheader>thead::-webkit-scrollbar {
    background-color: inherit;
}


table.table-fixedheader>thead>tr>th:after, table.table-fixedheader>tbody>tr>td:after {
    content:' ';
    display: table-cell;
    visibility: hidden;
    clear: both;
}

/*
We want to set <th> and <td> elements to...

JavaScript

/*

Modified by santosh
original by David Rueter ([email protected])  2/18/2014

Derived from answer by giulio posted on https://stackoverflow.com/questions/21168521/scrollable-table-with-fixed-header-in-bootstrap with example at http://jsfiddle.net/T9Bhm/7/

Modified to use child selectors (instead of decendent selectors) so that nested tables do not cause problems. Also performed additional testing and refinements.

Assumes we are using Bootstrap 3, and that the table has a class of "table".  Compatible with additional Bootstrap table classes (table-condensed, table-striped, etc.)

Usage Notes:

1) Height of the scrolling <tbody> must be explicitly provided.
2) Width of each column must be explicitly provided, both in the <th> and the first row's <td> elements.
3) Height of the <thead> may be explicitly provided.  If it is not, you must provide a value for every <th> (i.e. use a &nbsp; if there is no value).
*/