Fixed Table Header in Bootstrap with material design

Table fixed header for bootstrap

Fixed Table Header with jQuery and used Bootstrap 3.x version framework in material design. Bootstrap freebies snippet for web application. The snippet is very clean and fast, easy to customize and use.

Fixed Table Header can use for large data where user more scroll and also view the header of table with scrolling.

Website Credits

  • Roboto Font Family – Google font
  • Courgette Font Family – Google font
  • Bootstrap 3.3.7
  • Valid HTML5 & CSS3
  • Cross Browser Compatible (IE 9+, Chrome, FF, Safari, Opera)

Fixed Header jQuery Code

;(function($) {
$.fn.fixMe = function() {
return this.each(function() {
var $this = $(this),
$t_fixed;
function init() {
$this.wrap('<div class="container" />');
$t_fixed = $this.clone();
$t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
resizeFixed();
}
function resizeFixed() {
$t_fixed.find("th").each(function(index) {
$(this).css("width",$this.find("th").eq(index).outerWidth()+"px");
});
}
function scrollFixed() {
var offset = $(this).scrollTop(),
tableOffsetTop = $this.offset().top,
tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
if(offset < tableOffsetTop || offset > tableOffsetBottom)
$t_fixed.hide();
else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden"))
$t_fixed.show();
}
$(window).resize(resizeFixed);
$(window).scroll(scrollFixed);
init();
});
};
})(jQuery);

$(document).ready(function(){
$("table").fixMe();
});