لقد لخصت كيفية استخدام CSS لتحقيق الضوء الحدودي والتأثير المظلم للحدود على الجدول + BorderColordark + BorderColorlight. ثم سألني أحد مستخدمي الإنترنت عن سبب كتابته لأسلوب CSS مماثل ، لكنه لم يستطع إلا أن يرى تأثير الحدود على الجدول عادة تحت الأوبرا ، ولم يكن هناك شيء تحت IE.
خرجت من Opera9 ورأيت أن الأمر كان بالفعل. السبب ليس معقدًا: لأنه في ظل IE (يبدو أن Firefox متسق مع IE) ، إذا كان محتوى TD فارغًا ، حتى لو قمت بتعيين الارتفاع والعرض ، فلن يتم عرض النمط الحدودي لهذه الخلية ؛ ستستخدم Opera النمط لتقديمه بغض النظر عما إذا كان هناك محتوى أم لا. تمت مواجهة هذا السؤال عندما تخرجت. جاء رئيس القسم ليسألني في ذلك الوقت ، وبعد ذلك أخبرته: فقط أضفه إلى كل TD فارغ. في كل مرة أواجه هذه المشكلة في المستقبل ، سأستخدم هذه الطريقة البسيطة والخام والفعالة لحلها.
لكن اليوم بذلت قصارى جهدي لدراستها عدة مرات ، ومن Jiarry ، كنت أعلم أن بناء جملة CSS سمح لنا بتغيير هذه السلوكيات الافتراضية: استخدام الحدود: الانهيار ؛ والخلايا الفارغة: عرض ؛ لجعل الحدود المختفية تظهر.
class = test1: إضافة الحدود: الانهيار ؛
.test1 {
الحدود: 1 بكسل Solid #999999 ؛
حدود الحدود: الانهيار.
العرض: 60 ٪
}
.test1 td {
Border-Bottom: 1px Solid #999999 ؛
الارتفاع: 28 بكسل ؛
حشو اليسار: 6px ؛
}
الفئة 1 هناك محتوى هنا
هناك محتوى هنا
class = test2: إضافة الحدود: الانهيار ؛ والخلايا الفارغة: عرض ؛
.test2 {
الحدود: 1 بكسل سوداء صلبة.
حدود الحدود: الانهيار.
العرض: 60 ٪
}
.test2 td {
Border-Bottom: 1 بكسل سوداء صلبة ؛
الارتفاع: 28 بكسل ؛
حشو اليسار: 6px ؛
خلايا فارغة: عرض ؛
}
Class2 لديه محتوى هنا
هناك محتوى هنا
class = test3: بدون حدود الحدود: الانهيار ؛ والخلايا الفارغة: عرض ؛
.test3 {
الحدود: 1 بكسل Solid #999999 ؛
العرض: 60 ٪
}
.test3 td {
Border-Bottom: 1px Solid #999999 ؛
الارتفاع: 28 بكسل ؛
حشو اليسار: 6px ؛
}
Class3 لديه محتوى هنا
هناك محتوى هنا