كيفية إنشاء جداول قابلة للتمرير باستخدام CSS والعناوين الثابتة

في تطوير الويب، غالبًا ما يكون من الضروري إنشاء جداول تحتوي على كميات كبيرة من البيانات تتطلب التمرير. ومع ذلك، قد يكون الحفاظ على رأس ثابت أثناء التمرير في نص الجدول أمرًا صعبًا. إليك كيفية تحقيق هذا التأثير:

بنية HTML

أولاً، يجب علينا التأكد من صحة بنية HTML. لدينا قسم خارجي به شريط تمرير، وقسم داخلي يحتوي على الجدول، ويجب أن تكون رؤوس الجدول ضمن عنصر وبيانات الجدول ضمن عنصر

 
أنماط CSS
الآن، نحتاج إلى تصميم الجدول باستخدام CSS:
/* Separate header from body and allow both to scroll independently */
table tbody, table thead {
  display: block;
}

/* Enable scrolling for the table body */
table tbody {
  overflow: auto;
  height: 100px;
}

/* Fix the width of the header */
th {
  width: 72px;
}

/* Fix the width of the data cells */
td {
  width: 72px;
}
اعتبارات إضافية
تأكد من تضمين جميع خلايا الرأس والبيانات في عناصر  للمحاذاة الصحيحة. إذا كنت تريد عرضًا مختلفًا للأعمدة، استخدم محدد الطفل n في CSS.
ملاحظة: هذا الأسلوب مناسب للجداول الأصغر حجمًا. بالنسبة للجداول الكبيرة جدًا، فكر في استخدام تقنية مختلفة، مثل المحاكاة الافتراضية أو مكتبة خارجية.