هناك العديد من خصائص CSS لتصميم عناصر HTML. ال ' عرض 'الخاصية هي واحدة منها ، والتي تُستخدم لتعيين العنصر الذي تتم إدارته كعنصر مضمن أو عنصر كتلة. علاوة على ذلك ، يتم استخدام التصميم لأطفاله ، مثل التدفق أو المرن أو الشبكة. علاوة على ذلك ، تخصص هذه الخاصية الأنواع الداخلية والخارجية لعرض عنصر.
سيوضح هذا المنشور:
كيفية استخدام 'display: table-cell' في CSS؟
لاستخدام ال ' عرض 'الملكية بالقيمة' خلية الجدول '، جرب التعليمات المقدمة.
الخطوة 1: اصنع حاويات div متداخلة
أولاً ، أنشئ حاوية div الرئيسية بمساعدة ' للوصول إلى div الرئيسي ، استخدم ' #محتوى الجدول '، أين ' # 'هو محدد يستخدم للوصول إلى' بطاقة تعريف ”لحاوية div. ثم قم بتطبيق الخصائص التالية: الخطوة 3: نمط الحاوية 'tr-div' الآن ، قم بتصميم ' tr-div 'الحاوية على النحو التالي: انتاج | ال ' العرض: خلية الجدول تُستخدم خاصية CSS لتعيين عرض للبيانات التي تجعل العنصر يتصرف مثل الجدول. لذلك ، يمكن للمستخدمين إنشاء نسخة مكررة من جدول في HTML دون استخدام عنصر الجدول والعناصر الأخرى ، بما في ذلك td و tr. وبشكل أكثر تحديدًا ، تحدد ملكيته البيانات في شكل جدول. لاستخدام ال ' العرض: خلية الجدول 'CSS ، أنشئ حاويات div متداخلة وأدخل فئة في كل حاوية باسم محدد. بعد ذلك ، قم بالوصول إلى حاوية div في CSS ، وطبِّق خاصية 'display: table-cell' ، حيث يكون ' عرض 'لتعيين البيانات في خلايا الجدول. أوضح هذا المنشور طريقة استخدام العرض: خاصية CSS لخلية الجدول.
< شعبة بطاقة تعريف = 'محتوى الجدول' >
< شعبة فصل = 'tr-div' >
< شعبة فصل = 'td-div' > هاري شعبة >
< شعبة فصل = 'td-div' > لغة البرمجة / CSS شعبة >
شعبة >
< شعبة فصل = 'tr-div' >
< شعبة فصل = 'td-div' > إدوارد شعبة >
< شعبة فصل = 'td-div' > عامل ميناء شعبة >
شعبة >
< شعبة فصل = 'tr-div' >
< شعبة فصل = 'td-div' > جاك شعبة >
< شعبة فصل = 'td-div' > شخص سخيف شعبة >
شعبة >
شعبة >
يمكن ملاحظة أنه تم إضافة البيانات بنجاح:
الخطوة 2: نمط حاوية 'محتوى الجدول'
جدول العرض؛
الحشو: 7 بكسل ؛
}
هنا:
عرض: صف الجدول.
لون الخلفية: RGB ( 164 و 241 و 215 ) ؛
الحشو: 7 بكسل ؛
}
وفقًا لكتلة التعليمات البرمجية أعلاه ، فإن ' عرض 'قيمة الخاصية' على أنها ' صف الجدول 'مما يعني أن البيانات يتم تعيينها في شكل صفوف في جدول ،' لون الخلفية 'لتحديد اللون في الجزء الخلفي من العنصر ، وأخيرًا ،' حشوة 'مطبق:
الخطوة 4: تطبيق خاصية 'display: table-cell' على الحاوية 'td-div'
عرض: خلية الجدول.
العرض: 150 بكسل ؛
حدود: # 0f4bf0 صلب 1 بكسل ؛
الهامش: 5 بكسل ؛
الحشو: 7 بكسل ؛
}
الوصول إلى div الثالث بمساعدة ' .td-div 'dot selective والمعرف المعني ، وقم بتطبيق خصائص CSS الواردة أدناه:
لماذا تستخدم 'display: table-cell' في CSS؟
خاتمة