반응형 테이블의 고정 헤더 구현

데이터 표시 시 가독성을 높이기 위해 표 헤더가 고정됩니다.

1. 구현 방법:
1. 테이블 2개를 정의하고 하나는 절대 고정

<div class="table1-wapper">
   <table width="100%" cellpadding="0" cellspacing="0" id="table1">
      <tr><th><div>序号</div></th><th><div>股票名称</div></th>...</tr>
       <tr>...</tr>
  </table>
</div>
 <div class="fixed-table1-wapper">
  <table width="100%" cellpadding="0" cellspacing="0" id="fixed-table1">
 </table>
</div>

2. 테이블 1번째를 복사하여 테이블 2에 삽입합니다

var th_new=$("#table1 tr").eq(0).clone();
$("#fixed-table1").append(th_new);

3. resize() 메소드는 표 1의 각 열의 <번째> 너비를 실시간으로 가져옵니다.

function trResize(){
	$("#fixed-table1 th").each(function(){
	var num=$(this).index();
	var th_width=$("#table1 th").eq(num).width();
	$(this).css("width",th_width+"px");
	});
}

4. 페이지가 너무 작으면 표가 헤더와 함께 스크롤됩니다

$(".table1-wapper").scroll(function(){
	var scroll=-$(this).scrollLeft()
	$(".fixed-table1-wapper").css("left",scroll+"px");
});

2. 세부 사항에 주의하세요:

1. 너비 조정, 셀 간격 제거:

2. 테이블 라인:
테두리를 직접 추가하면 가장자리가 겹칩니다. border-collapse: Collapse;
3. td 너비: 첫 번째 줄의 너비를 조절하세요 / ;

4. 홀수 행과 짝수 행의 색상이 다릅니다.
css: #table1 tr:nth-child(2n){Background-color:#ccc;} ie7 호환성 문제

jquery: $("#table1 tr: 짝수").css("배경색","#ccc");

전체 코드는 다음과 같습니다.

　

	

		

			

				
序号
				
股票名称
				
股票代码
				
成交
				
涨跌幅
				
换手率
				
行业板块
			
			

				
1
				
光明乳业
				
600597
				
15.2
				
+6.23%
				
0.12%
				
食品饮料
			
			

				
2
				
光明乳业
				
600597
				
15.2
				
+6.23%
				
0.12%
				
食品饮料
			
			

				
3
				
光明乳业
				
600597
				
15.2
				
+6.23%
				
0.12%
				
食品饮料
			
			

				
4
				
光明乳业
				
600597
				
15.2
				
+6.23%
				
0.12%
				
食品饮料
			
			

				
5
				
光明乳业
				
600597
				
15.2
				
+6.23%
				
0.12%
				
食品饮料
			
			

				
6
				
光明乳业
				
600597
				
15.2
				
+6.23%
				
0.12%
				
食品饮料
			
			

				
7
				
光明乳业
				
600597
				
15.2
				
+6.23%
				
0.12%
				
食品饮料
			
			

				
8
				
光明乳业
				
600597
				
15.2
				
+6.23%
				
0.12%
				
食品饮料
			
			

				
9
				
光明乳业
				
600597
				
15.2
				
+6.23%
				
0.12%
				
食品饮料
			
			

				
10
				
光明乳业
				
600597
				
15.2
				
+6.23%
				
0.12%
				
食品饮料