How to Make Fixed Header Table Inside Scrollable Div

How to make fixed header table inside scrollable div?

How about doing something like this? I've made it from scratch...

What I've done is used 2 tables, one for header, which will be static always, and the other table renders cells, which I've wrapped using a div element with a fixed height, and to enable scroll, am using overflow-y: auto;

Also make sure you use table-layout: fixed; with fixed width td elements so that your table doesn't break when a string without white space is used, so inorder to break that string am using word-wrap: break-word;

Demo

.wrap {
    width: 352px;
}

.wrap table {
    width: 300px;
    table-layout: fixed;
}

table tr td {
    padding: 5px;
    border: 1px solid #eee;
    width: 100px;
    word-wrap: break-word;
}

table.head tr td {
    background: #eee;
}

.inner_table {
    height: 100px;
    overflow-y: auto;
}

<div class="wrap">
    <table class="head">
        <tr>
            <td>Head 1</td>
            <td>Head 1</td>
            <td>Head 1</td>
        </tr>
    </table>
    <div class="inner_table">
        <table>
        <tr>
            <td>Body 1</td>
            <td>Body 1</td>
            <td>Body 1</td>
        </tr>
        <!-- Some more tr's -->
    </table>
    </div>
</div>

Fixed header in table inside scrollable Div

You can try to separate the header from the content: http://jsfiddle.net/u2xZU/
and put the header outside the scrollable content.

Basically, use two tables, one for the header and one for the content:

<div>Some Page Content </div>
    <table>
            <thead>
                <tr>
                    <th>Head1</th>
                    <th>Head2</th>
                    <th>Head3</th>
                </tr>
            </thead>
    </table>
    <div style="max-height: 200px; overflow: auto;">
        <table id="test">
            <tbody>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
            </tbody>
        </table>
    </div>
<div>Some Page Content </div>

Table fixed header and scrollable body

Here is the working solution:

table {    width: 100%;}
thead, tbody, tr, td, th { display: block; }
tr:after {    content: ' ';    display: block;    visibility: hidden;    clear: both;}
thead th {    height: 30px;
    /*text-align: left;*/}
tbody {    height: 120px;    overflow-y: auto;}
thead {    /* fallback */}

tbody td, thead th {    width: 19.2%;    float: left;}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">    <thead>        <tr>            <th>Make</th>            <th>Model</th>            <th>Color</th>            <th>Year</th>        </tr>    </thead>    <tbody>        <tr>            <td class="filterable-cell">Ford</td>            <td class="filterable-cell">Escort</td>            <td class="filterable-cell">Blue</td>            <td class="filterable-cell">2000</td>        </tr>        <tr>            <td class="filterable-cell">Ford</td>            <td class="filterable-cell">Escort</td>            <td class="filterable-cell">Blue</td>            <td class="filterable-cell">2000</td>        </tr>        <tr>            <td class="filterable-cell">Ford</td>            <td class="filterable-cell">Escort</td>            <td class="filterable-cell">Blue</td>            <td class="filterable-cell">2000</td>        </tr>        <tr>            <td class="filterable-cell">Ford</td>            <td class="filterable-cell">Escort</td>            <td class="filterable-cell">Blue</td>            <td class="filterable-cell">2000</td>        </tr>    </tbody></table>