Fixed Table Header in Bootstrap with material design

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

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)

jQuery

;(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();
});

Theme author

author Mirchu

Theme attributes

Category: Snippets
Browsers: Chrome, Firefox, Safari, Opera, IE11, IE10, IE9, Android Browser, Microsoft Edge
Tags: bootstrap snippets, fixed header, jquery, material design, bootstrap tables
Release Date: 16 Nov, 2016

Location

P: +(92) 332-5903076
info@mirchu.net

Social Circle

Other Sites