لا ينطبق فئة على أعمدة الجدول

https://stackoverflow.com/questions/3857437

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. كما أنه لا يبدو أن سمة الحدود مدعومة على الإطلاق.

http://www.w3schools.com/tags/tag_col.asp

نصائح أخرى

هذا لأن ال تحدد مواصفات 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;
 }

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow