Фиксация шапки html таблицы, довольно распространенная задача.
Простейшее решение: делать копию шапки и при прокрутке делать ей стиль position: fixed
Пример над GitHub
Шапка для фиксации помечена классом foxFix.
«Фейковая» шапка появляющаяся при прокрутке имеет id=`header-fixed`
function fixTable() { var $header = $("table.foxFix > thead"); var tableOffset = $("table.foxFix").offset().top - $header.outerHeight() - $header.height(); var $fixTable = $("#header-fixed"); var $fixedHeader = $fixTable.append($header.clone()); function setWidthFixHeader() { var w = $header.outerWidth(); $fixedHeader.css('width', w); var thNorm = $header.find('th'); var thFix = $fixedHeader.find('th'); for (var i = 0, len = thNorm.length; i < len; i++) { w = $(thNorm[i]).outerWidth(); $(thFix[i]).css('width', w); } } $(window).bind("scroll", function() { var offsetV = $(this).scrollTop(); var offsetH = $(this).scrollLeft(); // по вертикали if (offsetV >= tableOffset && $fixedHeader.is(":hidden")) { setWidthFixHeader(); $fixedHeader.show(); } else if (offsetV < tableOffset) { $fixedHeader.hide(); } }); } </script>
<style> #header-fixed { position: fixed; display: none; background: white; } </style>
<table class="table table-hover" id="header-fixed"></table> <table class="table table-hover foxFix"> <thead> ...
а position: fixed; чем не способ?
Он и выполняется через position: fixed