เมื่อแสดงข้อมูลส่วนหัวคงที่สามารถอ่านได้ดีขึ้น
1. วิธีการใช้งาน:
1. กำหนด 2 ตารางหนึ่งอันแน่นอนแน่นอน
<div> <table cellpadding = "0" cellpacing = "0" id = "table1"> <tr> <th> <tv> หมายเลขซีเรียล </div> </th> <th> <Th> <TH> </div>
2. สำเนาตารางที่ 1 <th> และแทรกตารางที่ 2
var th_new = $ ("#table1 tr"). eq (0) .clone (); $ ("#recess-table1"). ผนวก (th_new);3. วิธีการปรับขนาด () เพื่อรับ <th> ความกว้างของแต่ละคอลัมน์ในตารางที่ 1 ในเวลาจริง
ฟังก์ชั่น tresize () {$ ("#recide-table1 th") แต่ละ (ฟังก์ชั่น () {var num = $ (นี่) .index (); var th_width = $ ("#table1 th"). eq (num) .width (); $ (นี่) -4. หน้าเล็กเกินไปโต๊ะจะเลื่อนด้วยการเลื่อนส่วนหัวของตาราง
$ (". table1-wapper"). scroll (function () {var scroll =-$ (นี่) .scrollleft () $ (". คงที่ -table1-wapper"). css ("ซ้าย", scroll+"px");});2. ให้ความสนใจกับรายละเอียด:
1. ความกว้างของการปรับตัวลบช่องว่างของเซลล์:
<table cellpadding = "0" cellpacing = "0"> </bable>
2. สายตาราง:
หากคุณเพิ่มเส้นขอบ <TD> โดยตรงขอบจะทับซ้อนกัน เพิ่มแอตทริบิวต์: การล่มสลายของชายแดน: การล่มสลาย;
3. ความกว้าง TD:
เพียงควบคุมความกว้างของบรรทัดแรก <td> </td>/<td> </td>
4. สีที่แตกต่างกันของแถวและแม้แต่แถว:
CSS: #table1 tr: nth-child (2n) {พื้นหลังสี: #ccc;} ปัญหาความเข้ากันได้ของ IE7
jQuery: $ ("#table1 tr: even"). css ("พื้นหลังสี", "#ccc");
ต่อไปนี้เป็นรหัสที่สมบูรณ์:
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> องค์กรตาราง </title> src = "js/jQuery-1.8.3.min.js"> </script> <style type = "text/css"> html {overflow: auto;} .table-wapper {width: 100%; margin: 30px auto; font-size: 16px; .table1-wapper {ความสูง: 200px; overflow-y: auto;} .table-wapper Table {border: 1px solid #f00; leight line-height: 2; การล่มสลายของชายแดน: การล่มสลาย; สีขาว: nowrap;} .table-wapper th {font-size: 18px; td {text-allign: center; border: 1px solid#f00;} .fixed-table1-wapper {ตำแหน่ง: Absolute; Top: 0px; ซ้าย: 0px; พื้นหลัง-สี: #dbdbdb;}/*#table1 tr: nth-child (2n) cellpadding = "0" cellpacing = "0" id = "table1"> <tr> <th> หมายเลขซีเรียล </th> <th> ชื่อหุ้น </th> <th> รหัสสต็อก </th> <th> transaction </th> trout <th> th> <th> th> <th> turbs </th> <th> turbs </th> <th> turbs </th> <th> turbs </th> <th> turbs </th> <th> turbs </th> <th> turbs </th> turbs <th> turbs <th> <th> ภาคอุตสาหกรรม </th> </tr> <tr> <td> 1 </td> <td> นมผง </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> <TD> 2 </TD> <TD> DAIRY สดใส </TD> <TD> 600597 </TD> <TD> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> Dairy </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> อาหารและเครื่องดื่ม </td> </tr> <td> <td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> อาหารและเครื่องดื่ม </td> </tr> <td> <td> 4 </td> <td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> อาหารและเครื่องดื่ม </td> </tr> <tr> <td> 5 </td> <td> <td> +6.23%</td> <td> 0.12%</td> <td> อาหารและเครื่องดื่ม </td> </tr> <tr> <td> 6 </td> <td> Dairy </td> <td> 600597 </td> <td> <td> <td> 0.12%</td> <td> อาหารและเครื่องดื่ม </td> </tr> <tr> <td> 7 </td> <td> นมสดใส </td> <td> 600597 </td> <td> 15.2 </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> 9 </td> <td> นมสดใส </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> Dairy </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%</td> <td> 0.12%</td> <td> อาหารและเครื่องดื่ม </td> </tr> </table> </div> </div> <script type = "text/javascript"> $ (function () {<br> $ ("#table1 tr: even"). css ("พื้นหลัง-สี", "#ccc"); // parity line line var inner_width = $ ("#table1" $ (". -table1-wapper"). css ("width", inner_width+"px"); $ (". table1-wapper"). scroll (function () {var scroll =-$ (นี่) .scrollleft () $ (". คงที่ -table1-wapper"). css ("ซ้าย", scroll+"px");}); ฟังก์ชัน tresize () {var inner_width = $ ("#table1"). outerwidth (); $ (". คงที่ -table1-wapper"). css ("width", inner_width+"px"); $ ("#recide-table1 th") แต่ละ (ฟังก์ชั่น () {var num = $ (นี่) .index (); var th_width = $ ("#table1 th"). eq (num) .width (); //console.log("Th_width: } </script> </body> </html>การใช้งานอย่างง่ายของส่วนหัวคงที่ของแบบฟอร์มการตอบสนองข้างต้นคือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น