HTML table with vertical scroll inside tbody

Topic on Stackoverflow: http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody

HTML

<div class='container'>
<table class="scroll">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
            <th>Head 4</th>
            <th>Head 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
           ...

CSS

.container
{
    height:300px;
    border: 2px solid red;
    position:relative;
}

table.scroll {
    border-collapse: collapse; */
    border-spacing: 0;
    border: 2px solid black;
    position:absolute;
    width:100%;
    height:100%;
}

table.scroll tbody,
table.scroll thead,
table.scroll tfoot { display: block; }

thead tr,
tfoot tr { 
    height: 30px;
    line-height: 30px;
}
thead {
    position:absolute;
    left:0;
    right:0;
    top:0;
}

tfoot { 
    position:absolute;
    left:0;
    right:0;
    bottom:0;
}

table.scroll tbody {
    overflow-y: auto;
    overflow-x: hidden;
    position:absolute;
    top:30px;
    bottom:30px;
}

tbody { border-top: 2px solid black; }

tbody td, thead th, tfoot td {
    width: 20%; */ /* Optional */
    border-right: 1px solid black;
    /* white-space: nowrap; */
}

tbody td:last-child, thead th:last-child, tfoot td:last-child {
    border-right: none;
}

JavaScript

// Change the selector if needed
var $table = $('table.scroll'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
    // Get the tbody columns width array
    colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();
    
    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });    
    // Set the width of thead columns
    $table.find('tfoot tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });    
}).resize(); // Trigger resize handler