does not apply class to the columns of a table

问题

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?

回答1:

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

回答2:

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)

回答3:

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

来源：https://stackoverflow.com/questions/3857437/col-class-slick-does-not-apply-class-to-the-columns-of-a-table

标签

html

css

html-table

col

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

问题

回答1:

回答2:

回答3: