<col class="slick"> does not apply class to the columns of a table_问答_开发者

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

开发者 https://www.devze.com 2023-01-18 21:26 出处：网络

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

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

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

精彩评论

关注公众号

热门标签

图文推荐

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

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：