الجداول المتجاوبة للتمرير | تنسيق الجداول في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تُعد الجداول العريضة متعددة الأعمدة السبب الأول لظهور شريط التمرير الأفقي المزعج على الهواتف الذكية. لحماية تخطيط صفحتك بالكامل، غلّف عنصر <table class="table"> داخل حاوية <div class="table-responsive"> ليقتصر التمرير الأفقي السلس على صندوق الجدول وحده دون تحريك رأس الصفحة أو شريط التنقل.

ويمكنك تقييد التمرير بشاشات محددة عبر النسخ المرحلية من .table-responsive-sm حتى .table-responsive-xxl؛ فمثلاً يعمل .table-responsive-lg بالتمرير الأفقي تحت عرض 992px ويتحول لجدول عادي كامل العرض على الشاشات الأكبر:

الصف 2 كود برمجي

HTML

<div class="table-responsive">
  <table class="table caption-top align-middle">
    <caption>Nodes Audit</caption>
    <thead class="table-light">
      <tr><th scope="col">Node</th><th>RAM</th></tr>
    </thead>
    <tbody class="table-group-divider">
      <tr><td>node-01</td><td>16 GB</td></tr>
    </tbody>
  </table></div>

جرّب بنفسك

الصف 3 ملاحظة هامة

الصف 4 ملاحظة هامة

الصف 5 شرح توضيحي

يوجز الجدول المرجعي التالي كلاسات الجداول القياسية في بوتستراب 5.3 لتوظيفها بدقة في لوحات البيانات:

الكلاس	العنصر المستهدف	الوظيفة البصرية والتقنية
`.table`	`<table>`	تفعيل التنسيق القياسي وحشو الخلايا وخطوط الفصل
`.table-primary` .. `.table-dark`	جدول أو صف أو خلية	تلوين دلالي للسجلات أو رأس الجدول
`.table-striped` / `.table-striped-columns`	`<table>`	تظليل متناوب للصفوف أو للأعمدة الرأسية
`.table-hover` / `.table-active`	جدول / صف أو خلية	إضاءة عند المرور بالمؤشر أو تثبيت الصف النشط
`.table-bordered` / `.table-borderless` / `.table-sm`	`<table>`	إطار كامل، أو بلا حدود، أو حشو مضغوط للنصف
`.table-group-divider` / `.caption-top`	`<tbody>` / `<table>`	خط فاصل سميك تحت الرأس ورفع عنوان الجدول للأعلى
`.table-responsive` / `.table-responsive-{bp}`	`<div>` أب	تمرير أفقي معزول يحمي صفحة الهاتف من الكسر

الصف 6 ملاحظة هامة

خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

ملخص الدرس: تعلّمت في هذا الدرس بناء جداول البيانات في بوتستراب 5.3 وتلوينها بالكلاسات السياقية، وتفعيل التخطيط المتناوب للصفوف والأعمدة وتفاعل المرور، وضبط الحدود والحجم المضغوط وفواصل المجموعات، وتغليف الجداول العريضة للتمرير الآمن على الهواتف.

الخطوة التالية والدرس القادم

انتقل الآن إلى درس «مكتبة الأيقونات في بوتستراب 5» لتتعلم تضمين أيقونات Bootstrap Icons المتجهية وتنسيق حجمها ولونها وإتاحتها.

Responsive Scrolling Tables الجداول المتجاوبة للتمرير