جداول HTML العمودية

يوفر إنشاء جداول HTML ذات صفوف عمودية طريقة فريدة لعرض البيانات، مع وضع رؤوس الصفوف على الجانب الأيسر بدلا من الأعلى. ولتحقيق ذلك، يمكن تطبيق تصميم CSS لتحويل بنية الجدول.

تصميم CSS

لتقديم صفوف الجدول كأعمدة رأسية، يتم تطبيق قواعد CSS التالية يمكن استخدامها:

tr { عرض: كتلة؛ تعويم: يسار؛ } عشر، د { عرض: كتلة؛

tr {
  display: block;
  float: left;
}

th, td {
  display: block;
}

تكامل AngularJS

يمكن الحفاظ على الوصول إلى صفوف الجدول، المعروضة الآن كأعمدة، من خلال دمج CSS التالي القواعد:

/* طي الحدود */ tr>*:ليس(:الطفل الأول) { أعلى الحدود: 0؛ } tr:not(:الطفل الأول)>* { الحدود اليسرى: 0؛

تضمن هذه القواعد عرض الحدود بين خلايا الجدول عند الحواف فقط، مما يوفر تمييزًا واضحًا بين الصفوف. باستخدام هذه التقنيات جنبًا إلى جنب مع AngularJS، يمكنك معالجة بيانات الجدول ديناميكيًا مع الحفاظ على الاتجاه الرأسي.