데이터를 표시 할 때 고정 헤더가 더 나은 가독성을 가질 수 있습니다.
1. 구현 방법 :
1. 2 개의 테이블을 정의하십시오. 하나는 절대 고정입니다
<div> <테이블 CellPadding = "0"CellPacing = "0"id = "table1"> <tr> <th> <div> 일련 번호 </div> </th> <th> <div> 상점 이름 </div> </th> ... </tr> <tr> ... </테이블> </div>
2. 표 1 <th> 복사 및 표 2를 삽입하십시오
var th_new = $ ( "#table1 tr"). eq (0) .Clone (); $ ( "#fixed-table1"). Append (th_new);
3. resize () 메소드 표 1의 각 열의 <th> 너비를 실시간으로 얻으려면
function trresize () {$ ( "#fixed-table1 th"). 각 (function () {var num = $ (this) .index (); var th_width = $ ( "#table1 th"). }4. 페이지가 너무 작고 테이블 헤더 스크롤로 테이블이 스크롤됩니다.
$ ( ". table1-wapper"). scroll (function () {var scroll =-$ (this) .scrollleft () $ ( ". 고정 table1-wapper"). css ( "왼쪽", 스크롤+"px");2. 세부 사항에주의를 기울이십시오.
1. 적응성 폭, 셀 간격을 제거하십시오.
<table cellPadding = "0"CellPacing = "0"> </table>
2. 테이블 라인 :
국경 <td>를 직접 추가하면 가장자리가 겹치게됩니다. 속성 추가 : Border-Collapse : Collapse;
3. TD 너비 :
첫 번째 줄의 너비를 제어하기 만하면 <TD> </td>/<td> </td> 만 제어하십시오.
4. 홀수와 짝수 행의 다른 색상 :
CSS : #Table1 TR : Nth-Child (2N) {배경색 : #CCC;} IE7 호환성 문제
jQuery : $ ( "#table1 tr : 짝수"). css ( "배경색", "#ccc");
다음은 전체 코드입니다.
<! docType html> <html> <head> <메타 http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> 테이블 조직 </title> <link rel = "stylesheet"type = "text/css"href = "csss/basic.css"> src = "js/jquery-1.8.3.min.js"> </script> <style type = "text/css"> html {오버 플로우 : 자동;} .table-wapper {width : 100%; 마진 : 30px Auto; font-size; 위치 : 상대적; 오버 플로;} .table1-wapper {height : 200px; 오버 플로우 -y : 자동;} .table-wapper 테이블 {테두리 : 1px 고체 #f00; 라인-하이트 : 2; 테두리-콜랩스 : 붕괴; 흰색 공간 : nowrap;} .table-wapper th {font-size; 18px; font-weight; norman; beangkdbdb; td {text-align : center; border : 1px solid#f00;} .fixed-table1-wapper {position : position : apportue; top : 0px; 왼쪽 : 0px; 배경색 : #dbdbdb;}/*#table1 tr : nth-Child (2n) {background-color : #ccc;}*</head> <dyd> <dyd> </styt> CellPadding = "0"CellPacing = "0"id = "table1"> <tr> <th> Serial Number </th> <th> Stock Code </th> <th> Transaction </th> <th> 홍수 </th> <th> 홍수 </th> <th> <th> Turbs </th> <Torbs </th> <Th> Turbs </th> <th> Turbs </th> <th> Turbs </th> <th> Turbs </th> <th> Turbs </th> <th> Turbs </th> <th> Turbs </th> <th> Turbs </th> <th> Turbs </th> Turbs </th> <th> 산업 부문 </th> </tr> <tr> <td> 1 </td> <td> Bright Dairy </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> </td> <td> </td> <td> <td> 2 </td> <td> Bright Dairy </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> 음식과 음료 </td> <td> 유제품 </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> 음식과 음료 </td> </td> <tr> <td> 3 </td> Bright Dairy </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> 음식 음료 </td> </td> <tr> <td> 4 </td> Bright Dairy <td> <td> 60597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> 음식과 음료 </td> </tr> <td> 5 </td> <td> Bright Dairy </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> 음식과 음료 </td> </td> <td> 6 </td> <td> Bright Dairy </td> <td> 600597 </td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> 음식과 음료 </td> </tr> <td> <td> 7 </td> <td> Bright Dairy </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%<td> 0.12%</td> <td> 음료 </td> </tr> <tr> <td> 8 </td> <td> 밝은 유제품 </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> wextand </td> </td> <td> </td> <td> <td> 9 </td> <td> Bright Dairy </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> 음식과 음료 </td> <td> <td> <td> <td> 유제품 </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> 음식 및 음료 </td> </tr> </table> </div> <Table CellPadding = "셀 포싱 =" "0. </table> </div> </div> <script type = "text/javaScript"> $ (function () {<br> $ ( "#table1 tr : 짝수"). css ( "background-color", "#ccc"); // parity line color var inner_width = $ ( "#table1"); $ ( ". 고정-테이블 1-Wapper". CSS ( "width", inner_width+"px"); eq (0). $ ( ". table1-wapper"). scroll (function () {var scroll =-$ (this) .scrollleft () $ ( ". 고정 table1-wapper"). css ( "왼쪽", 스크롤+"px"); function trresize () {var inner_width = $ ( "#table1"). outterwidth (); $ ( ". 고정 table1-wapper"). css ( "width", inner_width+"px"); $ ( "#fixed-table1 th"). 각 (function () {var num = $ (this) .index (); var th_width = $ ( "#table1 th"). } </script> </body> </html>위의 반응 형 양식의 고정 헤더의 간단한 구현은 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.