Long Table Scroll

Uses jQuery to maniuplate the DOM for tables with class="body_scroll" so that the table's body will appear to be scrollable.

by secretgspot

HTML

<link rel="stylesheet" href="http://alekse.20121213.oscdev2.searchrev.com/css/bootstrap.min.css">
<link rel="stylesheet" href="http://alekse.20121213.oscdev2.searchrev.com/css/styles.css">
<section id="summary-content" class="product-summary">
    <!-- PRODUCT MATRIX TOOLBAR MENU -->
    <nav id="product-menu" class="navbar clearfix affix">
        <ul class="nav">
            <!-- PRODUCT DROP-DOWN MENU -->
            <li class="dropdown">	<a href="#" id="reportrange" onclick="javascript: return false;">
					<i class="icon-calendar icon-large"></i>
					2013/03/03 <b class="caret"></b>
				</a>

            </li>
            <!-- GOING BACK TO OLD SKOOL? -->
            <li class="divider-vertical"></li>
            <li class="day-cal sun"><a href="javascript:clickOnDate(2,28,2013);" rel="tip-bottom" title=""
                data-original-title="28">Thu</a>
            </li>
            <li class="divider-vertical"></li>
            <li class="day-cal mon"><a href="javascript:clickOnDate(3,1,2013);" rel="tip-bottom" title=""
                data-original-title="1">Fri</a>
            </li>
            <li class="divider-vertical"></li>
            <li class="day-cal tue"><a href="javascript:clickOnDate(3,2,2013);" rel="tip-bottom" title=""
                data-original-title="2">Sat</a>
            </li>
            <li class="divider-vertical"></li>
            <!-- SELECTED START DATE -->
            <li class="day-cal wed today"><a href="#" rel="tip-bottom" title="" data-original-title="3">Sun</a>
            </li>
            <li class="divider-vertical"></li>
            <li class="day-cal thu"><a href="javascript:clickOnDate(3,4,2013);" rel="tip-bottom" title=""
                data-original-title="4">Mon</a>
            </li>
            <li class="divider-vertical"></li>
            <li class="day-cal fri"><a href="javascript:clickOnDate(3,5,2013);" rel="tip-bottom" title=""
                data-original-title="5">Tue</a>
            </li>
           ...

CSS

/*necessary for scroll*/
 .header_table {
    position: fixed;
    top: 112px;
    z-index: 10;
}
#matrix-chart {
    margin-top: 104px;
}

JavaScript

var header_table = $('<table aria-hidden="true" class="header_table box-table-b"><thead><tr><th></th></tr></thead></table>');

//inject table that will hold stationary row header; inject the div that will get scrolled
$('table#table_cont').before(header_table);

$('table#table_cont').each(function (index) {
    //to minimize FUOC, I like to set the relevant variables before manipulating the DOM
    var columnWidths = [];
    var $targetDataTable = $(this);
    var $targetHeaderTable = $("table.header_table").eq(index);
    
    // Get column widths
    $($targetDataTable).find('thead tr th').each(function (index) {
        columnWidths[index] = $(this).width();
    });
    
    // hide original header from sighted users
    $($targetDataTable).children('thead').hide();
    
    // insert header data into static table
    $($targetHeaderTable).find('thead').replaceWith($($targetDataTable).children('thead').clone().show());
    
    // modify column width for header
    $($targetHeaderTable).find('thead tr th').each(function (index) {
        $(this).css('width', columnWidths[index]);
    });
    
    // make sure table data still lines up correctly
    $($targetDataTable).find('tbody tr:first td').each(function (index) {
        $(this).css('width', columnWidths[index]);
    });
});