Sticky Table Header

stickytableheader

<style>
.stickTable{/* position: absolute;top: -67px;left: 0; */width: 100%;}
.footable{position: relative;margin-top: 67px;}
.stickTable.affix{position: fixed;top: 114px;right: auto;left: auto; width:1142px;}

.footable > tbody > tr > td:nth-child(1), .footable > thead > tr > th:nth-child(1){width: 200px;}
.footable > tbody > tr > td:nth-child(2), .footable > thead > tr > th:nth-child(2){width: 185px;}
.footable > tbody > tr > td:nth-child(3), .footable > thead > tr > th:nth-child(3), .footable > tbody > tr > td:nth-child(4), .footable > thead > tr > th:nth-child(4), .footable > tbody > tr > td:nth-child(5), .footable > thead > tr > th:nth-child(5), .footable > tbody > tr > td:nth-child(6), .footable > thead > tr > th:nth-child(6), .footable > tbody > tr > td:nth-child(7), .footable > thead > tr > th:nth-child(7), .footable > tbody > tr > td:nth-child(8), .footable > thead > tr > th:nth-child(8), .footable > tbody > tr > td:nth-child(9), .footable > thead > tr > th:nth-child(9), .footable > tbody > tr > td:nth-child(10), .footable > thead > tr > th:nth-child(10),.footable > tbody > tr > td:nth-child(11), .footable > thead > tr > th:nth-child(11){ width:83px;}
.footable > tbody > tr > td, .footable > thead > tr > th{font-size:13px;}
@media (max-width:1024px){
  .stickTable.affix{ top: 0px; width: 940px;}

}
@media (max-width:991px){
  .footable > tbody > tr > td:nth-child(1), .footable > thead > tr > th:nth-child(1), .footable > tbody > tr > td:nth-child(2), .footable > thead > tr > th:nth-child(2), .footable > tbody > tr > td:nth-child(3), .footable > thead > tr > th:nth-child(3), .footable > tbody > tr > td:nth-child(4), .footable > thead > tr > th:nth-child(4){width:30%;}
  .stickTable.affix{ width: 720px; }
}
@media (max-width:800px){
 /* .footable > tbody > tr > td:nth-child(2), .footable > thead > tr > th:nth-child(2) {width: 355px;}
  .stickTable.affix{top:0;left: 15px;width: 95%;}.stickTable tr{width: 100%;display: flex;} */
}
@media (max-width:767px){
  .stickTable.affix{ width: 96%; }
}
@media (max-width:370px){
.footable > tbody > tr > td:nth-child(1), .footable > thead > tr > th:nth-child(1), .footable > tbody > tr > td:nth-child(2), .footable > thead > tr > th:nth-child(2){width:50%;}
.stickTable.affix{width:91%;}
}

</style>
<script>
jQuery(document).ready(function() {
    //alert('Puran');
	var stickyOffset = jQuery('.stickTable').offset().top;
	
	jQuery(window).scroll(function(){
		var sticky = jQuery('.stickTable'),
		scroll = jQuery(window).scrollTop();
		
		if(scroll + jQuery(window).height() == jQuery(document).height()) sticky.removeClass('affix');
		else if (scroll >= stickyOffset) sticky.addClass('affix');
		else sticky.removeClass('affix');
		});
	});
</script>