não aplica classe às colunas de uma tabela

StackOverflow https://stackoverflow.com/questions/3857437

  •  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?

Foi útil?

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.

http://www.w3schools.com/tags/tag_col.asp

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 (valor collapse 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;
 }
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top