<col class=“slick”> does not apply class to the columns of a table

StackOverflow https://stackoverflow.com/questions/3857437

  •  27-09-2019
  •  | 
  •  

문제

My understanding of col is that it may be used to indicate a class for all the elements in a table's column. This doesn't seem to be working for me though. I can apply the class to individual td's, but I want col to help me avoid this.

Here is the html head:

<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>

Interestingly, the background color always works, but the border sometime fails.

Here is the html body:

<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>

Removing the tbody or colgroup tags does not seem to matter. The background is present in both elements; the border is only applied to the second element, where the class is specified in the td tag.

I had a hunch that border wouldn't work with col, but Firebug shows that the slick style isn't applied to the left column at all. What's wrong?

도움이 되었습니까?

해결책

According to w3 schools, only the width attribute works in Firefox. It also doesn't look like the border attribute is supported at all.

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

다른 팁

This is because the CSS 2.1 specification defines that the different border properties only apply when you set border-collapse: collapse; on the related <table> element.

Furthermore, according to CSS 2.1 there are only very few properties, that can be used to style columns (with restrictions):

  • border properties (require border-collapse: collapse; on the related <table>element)
  • background properties (only apply if the cell and row background is transparent)
  • width
  • visibility (value collapse avoids rendering of the cells, cells spanning into other columns are clipped)

You don't have to apply classes to every td.

You can simply style the td's:

 td {
  background-color:#b0c4de;
  border-style:solid;
  border-width:5px;
 }
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top