ne s'applique pas classe aux colonnes d'une table
-
27-09-2019 - |
Question
Ma compréhension du col est qu'il peut être utilisé pour indiquer une classe pour tous les éléments dans la colonne d'une table. Cela ne semble pas fonctionner pour moi bien. Je peux appliquer la classe individuelle TD, mais je veux me aider à col éviter.
Voici la tête html:
<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>
Fait intéressant, la couleur de fond fonctionne toujours, mais la frontière échoue quelque temps.
Voici le corps 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>
Suppression des balises tbody ou colgroup ne semble pas à la matière. Le fond est présent dans les deux éléments; la frontière est appliquée uniquement sur le second élément, dans lequel la classe est spécifiée dans la balise td.
J'ai eu le pressentiment que la frontière ne fonctionnerait pas avec col, mais Firebug montre que le style lisse n'est pas appliquée à la colonne de gauche du tout. Quel est le problème?
La solution
Selon les écoles w3, seul l'attribut width fonctionne dans Firefox. Il ne ressemble pas à l'attribut border est pris en charge du tout.
Autres conseils
En outre, selon CSS 2.1 il n'y a que très peu de biens, qui peut être utilisé à des colonnes de style (avec restrictions):
- propriétés frontalières (exiger
border-collapse: collapse;
sur la<table>
element connexe) - propriétés d'arrière-plan (concernent que si la cellule et le fond est transparent rangée)
-
width
-
visibility
(valeur contournementscollapse
rendu des cellules, les cellules couvrant dans d'autres colonnes sont tronquées)
Vous ne devez pas appliquer les classes à chaque td.
Vous pouvez simplement le style de la td:
td {
background-color:#b0c4de;
border-style:solid;
border-width:5px;
}