عنوان الجدول والتمرير الأفقي الآمن | التحكم في شكل الجداول في لغة CSS

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

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

تتضمن الجداول الدلالية عنصر <caption> لوصف محتوى البيانات للقراء وقارئات الشاشة. ويعرضه المتصفح افتراضياً أعلى الجدول بالقيمة caption-side: top;، بينما تنقله القيمة caption-side: bottom; ليظهر بأناقة أسفل الجدول كتعليق توضيحي.

ولأن الجداول متعددة الأعمدة قد تتجاوز عرض شاشات الهواتف الضيقة وتكسر تخطيط الصفحة بأكملها، أحط الجدول دائماً بحاوية خارجية <div class="table-scroll"> تحمل overflow-x: auto; مع width: 100%; ليبقى التمرير الأفقي محصوراً بأمان داخل إطار الجدول وحده.

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

CSS

.table-scroll {
  width: 100%;
  overflow-x: auto;
}
.wide-table {
  min-width: 520px;
  border-collapse: collapse;
  caption-side: bottom;
}

جرّب بنفسك

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

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

Table Captions Horizontal Scrolling عنوان الجدول والتمرير الأفقي الآمن

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

جميع فقرات هذا الدرس (التحكم في شكل الجداول في لغة CSS)