JSFiddle - React, Tailwind, and code Playground

by Harris Brakmic

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<table id="myTable" class="table table-fixedheader">
    <thead>
        <tr>
            <th width="15%">Column1</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:100px">
        <tr>
            <td width="15%">aaaaaaaaaaa</td>
            <td width="15%">bbbbb</td>
            <td width="15%">ccccccccccc</td>
            <td width="15%">ddddddddddd</td>
            <td width="40%">eeeeeeeeeee</td>            
        </tr>
        <tr>
            <td>aaaaaaaaaaa</td>
            <td>bbbbbbbbbbb</td>
            <td>ccccccccccc</td>
            <td>ddddddddddd</td>
            <td>eeeeeeeeeee</td> 
        </tr>
        <tr>
            <td>aaaaaaaaaaa</td>
            <td>bbbbbbbbbbb</td>
            <td>ccccccccccc</td>
            <td>ddddddddddd</td>
            <td>eeeeeeeeeee</td> 
        </tr>
        <tr>
            <td>aaaaaaaaaaa</td>
            <td>bbbbbbbbbbb</td>
            <td>ccccccccccc</td>
            <td>ddddddddddd</td>
            <td>eeeeeeeeeee</td> 
        </tr>
        <tr>
            <td>aaaaaaaaaaa</td>
            <td>bbbbbbbbbbb</td>
            <td>ccccccccccc</td>
            <td>ddddddddddd</td>
            <td>eeeeeeeeeee</td> 
        </tr>
    </tbody>
</table>

CSS

table.table-fixedheader>tbody {
    display: block;
}

table.table-fixedheader>tbody {
    overflow-y: auto;
    height: 50px; /*placeholder:  override as needed*/
}

table.table-fixedheader>thead>tr>th, table.table-fixedheader>tbody>tr>td {
    float: left;
    width: 100px; /*plachoder:  override as needed*/
}

JavaScript

/*
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 simplified by removing some unnecessary CSS.

Assumes we are using Bootstrap 3, and that the table has a class of "table".  If either of these are not the case, you must add the following to the CSS:

table.fixedHead {
    width: 100%
}

Additional Bootstrap table classes may be added without any problems (table-condensed, table-striped, etc.)

Notes:

1) Height of the <thead> must be explicitly provided.  The .fixedHead class provides a default / placeholder

2) Width of each column must be explicitly provided--both for the <th> and the first row of <td> nodes.  The .fixedHead class provides defaults / placeholders.

3) If a value is omitted from a <th>, you must provide a &nbsp; in lieu of the value--or else explicitly specify the height of the <tr>

*/