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

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

  •  27-09-2019
  •  | 
  •  

Question

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?

Was it helpful?

Solution

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

OTHER TIPS

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;
 }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top