Y axis table body scrolling

Provides a simple, yet solid example of allowing table body scrolling with matching column sizes in both the header and footer.

by A Wells

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<body>
    <table id="my-table" style="border-spacing: 0px;">
<thead>
	<tr>
		<th>Title</th>
		<th>Date</th>
		<th>Author</th>
		<th>Category</th>
	</tr>
</thead>
<tfoot>
	<tr>
		<th>Title</th>
		<th>Date</th>
		<th>Author</th>
		<th>Category</th>
	</tr>
</tfoot>
<tbody>
<tr>
	<td>Ac risus. Morbi metus.</td>
	<td>July 1st, 2014</td>
	<td>Daphne S. Clemons</td>
	<td>Nunc id</td>
</tr>
<tr>
	<td>Vitae, erat. Vivamus</td>
	<td>October 2nd, 2014</td>
	<td>Fay E. Matthews</td>
	<td>Est. Nunc</td>
</tr>
<tr>
	<td>Donec consectetuer mauris id</td>
	<td>January 31st, 2015</td>
	<td>Constance Espinoza</td>
	<td>Vitae aliquam</td>
</tr>
<tr>
	<td>Consectetuer adipiscing elit.</td>
	<td>November 25th, 2013</td>
	<td>Melodie Y. Mcdonald</td>
	<td>In scelerisque</td>
</tr>
<tr>
	<td>Metus vitae velit egestas lacinia.</td>
	<td>May 20th, 2015</td>
	<td>Hilda Sweeney</td>
	<td>Dui nec</td>
</tr>
<tr>
	<td>Dolor. Fusce mi lorem, vehicula et,</td>
	<td>November 8th, 2014</td>
	<td>Kasimir Maldonado</td>
	<td>Adipiscing non,</td>
</tr>
<tr>
	<td>Vestibulum ut eros non enim</td>
	<td>May 28th, 2014</td>
	<td>Brenden Stephenson</td>
	<td>Parturient montes,</td>
</tr>
<tr>
	<td>Vel quam dignissim pharetra. Nam ac</td>
	<td>December 7th, 2014</td>
	<td>Meghan C. Pitts</td>
	<td>Massa non</td>
</tr>
<tr>
	<td>Lectus justo eu arcu. Morbi</td>
	<td>October 18th, 2015</td>
	<td>Aileen Kirk</td>
	<td>Vestibulum accumsan</td>
</tr>
<tr>
	<td>Condimentum eget, volutpat ornare, facilisis eget, ipsum.</td>
	<td>January 22nd, 2015</td>
	<td>Tanek C. Dean</td>
	<td>Donec non</td>
</tr>
<tr>
	<td>Vehicula aliquet libero. Integer in magna.</td>
	<td>January 13th, 2015</td>
	<td>Allegra Pennington</td>
	<td>Malesuada id,</td>
</tr>
<tr>
	<td>Penatibus et magnis</td>
	<td>January 12th, 2015</td>
	<td>Tamekah P. Stephenson</td>
	<td>Vel, mauris.</td>
</tr>
<tr>
	<td>Vitae erat vel pede blandit congue.</td>
	<td>November 28th,...

JavaScript

jQuery(document).ready(function() {
    var height = 400;
    var $table = $("table").first();

    // capture initial widths (can also set them manually)
    var column_widths = 
        $table
            .find("> thead > tr:first")
            .children()
            .map(function(i, e) {
                return $(e).outerWidth();
            })
            .get();

    // Make all the table components display: block;
    $table
        .css(
        {
            'display': 'block',
            'position': 'relative',
            'box-sizing': 'border-box',
            'height': height,
        }
        )
        .find("> thead")
            .css(
                {
                    'display': 'block',
                    'position': 'absolute',
                    'top': '0'
                }
            )
            .end()
        .find("> tfoot")
            .css(
                {
                    'display': 'block',
                    'position': 'absolute',
                    'bottom': '0'
                }
            )
            .end()
        .find("> tbody")
            .css(
                {
                    'display': 'block',
                    'position': 'absolute',
                    'top': $table.find("> thead").outerHeight() + 'px',
                    'overflow-y': 'auto',
                    'overflow-x': 'hidden'
                }
            );

    // calculate body bounds
    var tbody_height = $table.height() -
        $table.find("> thead,> tfoot").map(function(i,e) {
            return $(e).outerHeight();
        }).get().reduce(function(prev, current) {
                return prev + current;
            },
            0
        );
    $table.find("> tbody").css('height', tbody_height + 'px');
              
    // set tbody column widths, and copy back to thead and tfoot
    $table
    .find("> thead, > tbody, > tfoot")
        .find("> tr:first-child")
            .each(function(i,e) {
               ...