Float the table header on scroll. floating the header while scrolling within the window. https://github.com/mkoryak/floatThead
var $table = $('table.demo');
//init
$table.floatThead({
top: 25,
position: 'fixed',
//specify a container element inside of which the table will scroll
scrollContainer: function($table){
return $table.closest('.wrapper'); //must exist in DOM & wrap the table
},
//Responsive window scrolling: http://getbootstrap.com/css/#tables-responsive
//specify a responsive container element within which the table will scroll horizontally at some screen sizes
responsiveContainer: function($table){
return $table.closest('.table-responsive');
}
});
/**---------------------------------------------------------------------------------------------------
* Methods
*/
// unfloat the headers
var reinit = $table.floatThead('destroy');
// ... later you want to re-float the headers with same options
reinit();
//Cause header to realign itself to the correct position, then reflow it
$table.floatThead();
$table.floatThead('reflow'); //assume: DOM has changed. must reflow floatThead