fix-table-header/demo/jQuery.fixTableHeader.min.js

A jQuery plugin to fix header or footer row in a table on scroll

!function (t) { function i() { var i = t("<div>").css({ visibility: "hidden", width: 100, overflow: "scroll" }).appendTo("body"), e = t("<div>").css({ width: "100%" }).appendTo(i).outerWidth(); return i.remove(), 100 - e } function e(i) { var e = document.getElementById(t(i).attr("id")), h = window.getComputedStyle(e)["overflow-x"]; return ("scroll" === h || "auto" === h) && e.scrollWidth > e.clientWidth } t.fn.fixTableHeader = function (h) { var d, s, n = t.extend({ fixHeader: !0, fixFooter: !1 }, h), a = this, l = this.find("table"); d = this.find("table").has("thead").length ? this.find("table thead").has("th").length ? this.find("table thead th") : this.find("table thead td") : this.find("table").has("tbody").length ? this.find("table tbody").has("th").length ? this.find("table tbody th") : this.find("table tbody > tr:first-child td") : this.find("table").has("th").length ? this.find("table th") : this.find("table > tr:first-child td"), s = this.find("table").has("tfoot").length ? this.find("table tfoot td") : this.find("table").has("tbody").length ? this.find("table tbody > tr:last-child td") : this.find("table > tr:last-child td"); var o = 0; o = e(a) ? a.height() - i() : a.height(), d.each(function () { t(this).addClass(" fth-header") }), s.each(function () { t(this).addClass(" fth-footer") }), this.scroll(function () { n.fixHeader && d.each(function () { t(this).css("position", "relative"), t(this).css("top", a.scrollTop() + "px") }), n.fixFooter && s.each(function () { t(this).css("position", "relative"), t(this).css("top", o - l.height() + a.scrollTop() + "px") }) }) } }(jQuery);