لا ينطبق فئة على أعمدة الجدول
-
27-09-2019 - |
سؤال
فهمي للعقيد هو أنه يمكن استخدامه للإشارة إلى فئة لجميع العناصر في عمود الجدول. هذا لا يبدو أنه يعمل من أجلي. يمكنني تطبيق الفصل على TD الفردي ، لكنني أريد أن يساعدني Col في تجنب ذلك.
ها هو رأس HTML:
<head>
<style type="text/css">
.slick {
background-color:#b0c4de; /*This always works*/
border-style:solid; /*This doesn't work when only applied to a <col>*/
border-width:5px;
}
</style>
</head>
ومن المثير للاهتمام ، أن لون الخلفية يعمل دائمًا ، لكن الحدود تفشل في وقت ما.
ها هو جسم HTML:
<body>
<table><tbody>
<colgroup>
<col class="slick" />
<col class="slick" />
</colgroup>
<tr id="r1">
<td><label >Planner/Scheduler/Estimators</label></td>
<td class="slick"><label >2010</label></td>
</tr>
</tbody></table>
</body>
لا يبدو أن إزالة علامات tbody أو colgroup مهمة. الخلفية موجودة في كلا العنصرين ؛ يتم تطبيق الحدود فقط على العنصر الثاني ، حيث يتم تحديد الفصل في علامة TD.
كان لدي حدس أن الحدود لن تعمل مع Col ، لكن Firebug يدل على أن نمط البقعة لا يتم تطبيقه على العمود الأيسر على الإطلاق. ما هو الخطأ؟
المحلول
وفقًا لمدارس W3 ، تعمل سمة العرض فقط في Firefox. كما أنه لا يبدو أن سمة الحدود مدعومة على الإطلاق.
نصائح أخرى
هذا لأن ال تحدد مواصفات CSS 2.1 أن خصائص الحدود المختلفة تنطبق فقط عند تعيينك border-collapse: collapse;
على الصلة <table>
عنصر.
علاوة على ذلك ، وفقًا لـ CSS 2.1 ، لا يوجد سوى عدد قليل جدًا من الخصائص ، والتي يمكن استخدامها لتصميم الأعمدة (مع القيود):
- خصائص الحدود (تتطلب
border-collapse: collapse;
على الصلة<table>
عنصر) - خصائص الخلفية (تنطبق فقط إذا كانت خلفية الخلية والصف شفافة)
width
visibility
(القيمةcollapse
يتجنب تقديم الخلايا ، يتم قطع الخلايا التي تمتد إلى أعمدة أخرى)
ليس عليك تطبيق الفصول على كل TD.
يمكنك ببساطة تصميم TD:
td {
background-color:#b0c4de;
border-style:solid;
border-width:5px;
}