Фиксация шапки 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>
...