<col class="slick"> 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?
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)
widthvisibility(valuecollapseavoids 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;
}
加载中,请稍侯......
精彩评论