Bootstrap 5 الجداول

جدول أساسي

جدول Bootstrap 5 أساسي يحتوي على مسافة داخليه صغيرة وخطوط أفقية.

.table إضافة أسلوب أساسي للجدول:

مثال

تجربة بنفسك

سطر بالنقاط

.table-striped إضافة نقاط البوني إلى الجدول:

مثال

تجربة بنفسك

جدول به حواف

.table-bordered إضافة حواف إلى جميع الحواف للجدول والخلايا:

مثال

تجربة بنفسك

سطر مع تأثير وضع الفأرة

.table-hover إضافة تأثير وضع الفأرة على سطر الجدول (لون خلفي رمادي):

مثال

تجربة بنفسك

جدول أسود/داكن

.table-dark إضافة خلفية سوداء/داكنة للجدول:

مثال

تجربة بنفسك

جدول بنقاط条纹 باللون الداكن

دمج .table-dark و .table-striped لإنشاء جدول بنقاط条纹 باللون الداكن:

مثال

تجربة بنفسك

جدول قابل للوضع الفأرة باللون الداكن

.table-hover إضافة تأثير وضع الفأرة على سطر الجدول (لون خلفي رمادي):

مثال

تجربة بنفسك

جدول بدون حواف

.table-borderless حذف الحواف من الجدول:

مثال

تجربة بنفسك

الأنواع السياقية

يمكن استخدام الأنواع السياقية لكل جدول (<table>)، سطر الجدول (<tr>) أو خلية الجدول (<td>) تلوين.

مثال

تجربة بنفسك

الأنواع السياقية المتاحة:

النوع الوصف
.table-primary أزرق: يعني إجراء مهم.
.table-success أخضر: يعني نجاح أو إجراء إيجابي.
.table-danger أحمر: يعني خطر أو سلوك سلبي محتمل.
.table-info أزرق فاتح: يعني تغيير معلومات محايدة أو إجراء.
.table-warning برتقالي: يعني تحذير يجب الانتباه إليه.
.table-active رمادي: تطبيق لون الاستomitempty على سطر الجدول أو خلية الجدول.
.table-secondary رمادي: يعني إجراء غير مهم.
.table-light جدول رمادي فاتح أو خلفية سطر الجدول
.table-dark جدول رمادي داكن أو خلفية سطر الجدول

لون العنوان

يمكنك أيضًا استخدام أي نوع سياقي فقط لوضع لون الخلفية على عنوان الجدول:

مثال

تجربة بنفسك

جدول صغير

.table-sm يقلل النوع حجم الجدول عن طريق تقليل ملء الخلايا

مثال

تجربة بنفسك

جدول استجابي

.table-responsive يضيف النوع عند الحاجة شريط التمرير إلى الجدول (عندما يكون كبيرًا في الاتجاه الأفقي):

مثال

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

تجربة بنفسك

يمكنك أيضًا تحديد متى يجب على الجدول الحصول على شريط التمرير، اعتمادًا على عرض الشاشة:

النوع عرض الشاشة
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

مثال

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

تجربة بنفسك