"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
الصفحة الأمامية > برمجة > هل يمكن لـ CSS التحكم في عرض خلايا الجدول بغض النظر عن حجم المحتوى؟

هل يمكن لـ CSS التحكم في عرض خلايا الجدول بغض النظر عن حجم المحتوى؟

تم النشر بتاريخ 2024-11-07
تصفح:608

Can CSS Control Table Cell Widths Regardless of Content Size?

التحكم في عرض خلايا الجدول باستخدام CSS

في عالم جداول HTML، يمكن أن يمثل ضمان العرض الموحد لخلايا الجدول تحديًا عند التعامل مع محتوى بأحجام مختلفة. هل يمكننا تحقيق هذه النتيجة المرجوة من خلال CSS فقط، بغض النظر عن عدد الخلايا المعنية؟

بنية HTML واضحة ومباشرة: يعمل العنصر الأصلي

كحاوية الجدول، بينما تمثل عناصر
الفرعية الجدول. الخلايا.

يمكن الاستفادة من CSS لمعالجة هذه المشكلة. لضمان عرض الخلايا المتساوية، بغض النظر عن حجم المحتوى، نحتاج إلى:

  1. تشغيل آلية تخطيط الجدول الثابت: تعيين تخطيط الجدول: ثابت؛ على الأصل
    . يؤدي هذا إلى توجيه المتصفح إلى فرض عروض الخلايا المحددة بدلاً من ضبطها تلقائيًا على المحتوى. تعيين عرض لخلايا الجدول:
  2. على الرغم من أن تعيين عرض صغير (على سبيل المثال، 2) ليس إلزاميًا، إلا أنه ليس إلزاميًا. %) لكل
    يمثل خلية جدول يعمل كمشغل لتخطيط الجدول الثابت.يظهر كود CSS النهائي كما يلي:

    div { عرض: الجدول؛ العرض: 250 بكسل؛ تخطيط الجدول: ثابت؛ } شعبة > شعبة { العرض: خلية الجدول؛ العرض: 2%؛
    div {
      display: table;
      width: 250px;
      table-layout: fixed;
    }
    
    div > div {
      display: table-cell;
      width: 2%;
    }
أحدث البرنامج التعليمي أكثر>

تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.

Copyright© 2022 湘ICP备2022001581号-3