一個簡單的表頭固定

function tableResize(){
	if(document.documentElement.clientWidth<1170){
		$("#trialTable").css("width",document.documentElement.clientWidth-30);
		$("#MyTable1").css("width",1200);
		$("#trialTable").scroll(function(){//給table外面的div滾動事件綁定一個函數
		 var left=$("#trialTable").scrollLeft();//獲取滾動的距離
		 var trs=$("#trialTable>table tr");//獲取表格的所有tr
		 trs.each(function(i){//對每一個tr(每一行)進行處理
		 //獲得每一行下面的所有的td,然後選中下標爲0的,即第一列,設置position爲相對定位,相對於父div左邊的距離爲滑動的距離,然後設置個背景顏色,覆蓋住後面幾列數據滑動到第一列下面的情況,如果有必要也可以設置一個z-index屬性
     $(this).children().eq(0).css({"position":"relative","top":"0px","left":left});
		 });
	 });
	} else {
	 $("#trialTable").css("width","auto");
  $("#MyTable1").css("width","auto");
	}
}
$(document).ready(function() {
 tableResize()
});

<div id="trialTable" style="overflow-x:auto;">
	<table cellspacing="0" cellpadding="0" class="datatable-style show-all-table" id="MyTable1" style="">
	</table>
</div>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章