عند عرض البيانات ، يمكن أن يكون للرأس الثابت قابلية قراءة أفضل.
1. طريقة التنفيذ:
1. تحديد الجداول 2 ، واحد مطلق ثابت
<viv> <table cellpadding = "0" cellpacing = "0" id = "table1"> <tr> <th> <div> الرقم التسلسلي </div> </h> <th> <div> اسم المتجر </div> </th> ... </tr> <tr> <tr> <tr> ... </div>
2. نسخ الجدول 1 <TH> وأدخل الجدول 2
var th_new = $ ("#table1 tr"). eq (0) .clone () ؛ $ ("#table-table1"). إلحاق (th_new) ؛3. تغيير الحجم () للحصول على عرض <h> لكل عمود في الجدول 1 في الوقت الحقيقي
دالة trresize () {$ ("#liped-table1 th"). كل (function () {var num = $ (this) .index () ؛ var th_width = $ ("#table1 th"). }4. الصفحة صغيرة جدًا ، يتم تمرير الجدول باستخدام رأس الجدول التمرير
$ (".2. انتبه إلى التفاصيل:
1. العرض التكيفي ، قم بإزالة فجوات الخلية:
<الجدول cellpadding = "0" cellpacing = "0"> </lood>
2. خط الجدول:
إذا قمت بإضافة حدود <TD> مباشرة ، فستتداخل الحواف ؛ إضافة السمات: الحدود الحدودية: الانهيار ؛
3. عرض TD:
ما عليك سوى التحكم في عرض السطر الأول <td> </td>/<td> </td>
4. ألوان مختلفة من الصفوف الفردية وحتى:
CSS: #TABLE1 TR: NTH-Child (2n) {Background-Color: #CCC ؛} IE7 مشكلة التوافق
jQuery: $ ("#table1 tr: حتى").
ما يلي هو الرمز الكامل:
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> table table </title> <link rel = "stylesheet" type = "text/css" href = "css/basic. src = "js/jquery-1.8.3.min.js"> </script> <style type = "text/css"> html {overflow: auto ؛}. .table1-wapper {height: 200px ؛ overflow-y: auto ؛}. td {text-align: center ؛ الحدود: 1px solid#f00 ؛} .fixed-table1-wapper {position: absolute ؛ top: 0px ؛ left: 0px ؛ colorption-color: #DBDBDB ؛ cellpadding = "0" cellpacing = "0" id = "table1"> <tr> <th> الرقم التسلسلي </th> اسم الأسهم </th> <th> رمز الأسهم </th> <th> معاملة </th> <th> </th> </th> </th> <th> turbs </th> </th> <th> <th> turbs </h> <th> turbs </h> <th> turbs </h> <th> turbs </h> <th> turbs </h> <th> <th> قطاع الصناعة </th> </r> <tr> <td> 1 </td> <td> الألبان المشرقة </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23 ٪ </td> <td> 2 </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> <td> 600597 </td> <td> 15.2 </td> <td> +6.23 ٪ </td> <td> 0.12 ٪ </td> <td> food and beverage </td> </td> </tr> <tr> <td> 15.2 </td> <td> +6.23 ٪ </td> <td> 0.12 ٪ </td> <td> الطعام والمشروبات </td> </td> <td> <td> 5 </td> <td> +6.23 ٪ </td> <td> 0.12 ٪ </td> <td> الطعام والمشروبات </td> </td> <tr> <td> 6 </td> <td> bright dairy </td> <td> 600597 </td> <td> 15.2 </td> <td> 0.12 ٪ </td> <td> الطعام والمشروبات </td> </td> <tr> <td> 7 </td> <td> الألبان المشرقة </td> <td> 600597 </td> </td> <td> 15.2 </td> مشروب </td> </td> <tr> <td> 8 </td> <td> الألبان الساطعة </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23 ٪ </td> <td> 0.12 ٪ </td> <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> food and beverage </td> </td> </flip> <vid> </table> </viv> </viv> <script type = "text/javaScript"> $ (function () {<br> $ ("#table1 tr: حتى"). $ (. $ (". دالة trresize () {var inner_width = $ ("#table1"). OUTERWIDTH () ؛ $ (". $ ("#fixed-table1 th"). كل (دالة () {var num = $ (this) .index () ؛ var th_width = $ ("#table1 th"). Eq (num) .width () ؛ } </script> </body> </html>إن التنفيذ البسيط للرأس الثابت للنموذج المستجيب أعلاه هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.