My interpretation of the col element is that it can be used to assign a class to all elements in a column of a table. However, I am experiencing difficulties with this approach. While I am able to apply the class to individual td elements, I am looking for a way to utilize col to streamline this process.
Below is the HTML code snippet:
<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 consistently appears, whereas the border sometimes fails to display.
Now, let's take a look at the body portion of the HTML:
<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 appear to have any impact. The background color is present in both elements; however, the border is only visible in the second element where the class is specified within the td tag.
I initially suspected that the border property might not work with col, but upon inspecting it using Firebug, it seems that the slick style is not being applied to the left column at all. What could be causing this issue?