تقدم هذه المقالة تنفيذ تثبيت رأس جدول html ومشاركته مع الجميع، والتفاصيل هي كما يلي:
<div class=wrapbox> <div class=table-head> <table> <thead> <th width=10%>رقم العقد</th> <th width=30%>العميل المتعاقد</th> <th width= 20%>إصدار العملاء</th> <th width=10%>حالة العقد</th> <th width=30%>حصة دورة الإصدار للشروط المحددة</th> </thead> </table> </ div > <div class=table-body> <table> <tbody id=tbody> </tbody> </table> </div></div>
نلقي نظرة على المغلق
*{ الحشو: 0؛ } th { border: 1px Solid #e6e6e6; } td { حجم الخط: 5 بكسل؛ } .table-head{padding-right:17px;background-color:rgb(207, 231, 179);color:#000;height:5vh;} .table-body{width:100% height:94vh;overflow -y:scroll;} .جدول رأس الطاولة، جدول جسم الطاولة {العرض: 100%؛} .جدول جسم الطاولة tr:nth-child(2n+1){background-color:#f2f2f2;} .table-body table tr:hover {background-color:rgb(240, 249, 228);انقر لرؤية التأثير
في الواقع، النقطة الأساسية هي
1. استخدم علامة colgroup لتحديد عرض الأعمدة للجداول العلوية والسفلية للحفاظ على اتساقها.
2. يضيف رأس الجدول العلوي نمط الحشو إلى اليمين: 17 بكسل، ويهدف هذا العرض إلى ضمان اتساقه مع شريط التمرير الخاص بجسم الجدول السفلي في نفس الوقت -يضيف الجسم النمط overflow- y:scroll;
طالما أنك تتأكد من النقطتين المذكورتين أعلاه، يمكنك أيضًا إنشاء جدول برأس ثابت، وفي الوقت نفسه، لن تحدث مشكلة محاذاة الأعمدة العلوية والسفلية بشكل خاطئ!
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.