não aplica classe às colunas de uma tabela
-
27-09-2019 - |
Pergunta
Meu entendimento do COL é que ele pode ser usado para indicar uma classe para todos os elementos na coluna de uma tabela. Isso não parece estar funcionando para mim. Posso aplicar a classe aos TDs individuais, mas quero que o Col me ajude a evitar isso.
Aqui está a cabeça 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>
Curiosamente, a cor do plano de fundo sempre funciona, mas a fronteira falha.
Aqui está o corpo 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>
Remover as tags TBody ou ColGroup não parece importar. O fundo está presente nos dois elementos; A borda é aplicada apenas ao segundo elemento, onde a classe é especificada na tag TD.
Eu tinha um palpite de que a fronteira não funcionaria com o Col, mas o Firebug mostra que o estilo liso não é aplicado à coluna esquerda. O que há de errado?
Solução
Segundo as escolas do W3, apenas o atributo de largura funciona no Firefox. Também não parece que o atributo de fronteira é suportado.
Outras dicas
Isso é porque o Especificação CSS 2.1 define que as diferentes propriedades de fronteira se aplicam apenas quando você define border-collapse: collapse;
no relacionado <table>
elemento.
Além disso, de acordo com o CSS 2.1, existem muito poucas propriedades, que podem ser usadas para estilizar colunas (com restrições):
- Propriedades de fronteira (requerem
border-collapse: collapse;
no relacionado<table>
elemento) - Propriedades de fundo (aplique apenas se a célula e o fundo da linha for transparente)
width
visibility
(valorcollapse
evita a renderização das células, as células que abrangem em outras colunas são cortadas)
Você não precisa aplicar aulas a todos os TD.
Você pode simplesmente estilizar os TDs:
td {
background-color:#b0c4de;
border-style:solid;
border-width:5px;
}