Existe algum seletor CSS ou do jQuery que pegue uma coluna de uma tabela (cada td
da coluna)?
Ou, caso não haja um seletor simples que consiga fazer isso, dá pra fazer com pouco código em jQuery/JavaScript?
Existe algum seletor CSS ou do jQuery que pegue uma coluna de uma tabela (cada td
da coluna)?
Ou, caso não haja um seletor simples que consiga fazer isso, dá pra fazer com pouco código em jQuery/JavaScript?
Se nenhum dos TDs possuir um colspan
então é possível fazer isso usando a pseudo-classe :nth-child
:
Exemplo para selecionar todos os terceiros TDs:
table td:nth-child(3) {
/* estilo */
}
Suporte dos navegadores:
O jQuery não possui problemas com isso, funciona nos browseres suportados pela biblioteca.
Mas em termos de CSS, funciona a partir do IE 9. Você poderia usar o jQuery no IE 8 ou menor, para atribuir o CSS que quiser usando essa pseudo-classe, ou então, usar o seguinte CSS que usa a pseudo-classe :first-child
e o operador de proximidade (chamado de Adjacent sibling selectors
):
table td:first-child + td + td {
/* estilo */
}
:eq
é zero based, não é?
Commented
20/03/2014 às 19:32
:eq
é. Mas pelo fiddle acima, o :nth-child
é one based.
Commented
20/03/2014 às 19:33
A resposta do @Miguel Angelo vai resolver seu problema.
Porém, como é CSS3 http://www.w3schools.com/cssref/sel_nth-child.asp
Você não poderá usar em navegadores antigos.
Você poderia usar uma classe pra definir uma coluna especifica ex:
<table style="width:300px">
<tr>
<td class="Coluna1">Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td class="Coluna1">Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Após isso você pode pegar essa coluna por CSS ou por Jquery
CSS
.Coluna1{
//Codigo aqui
}
JQuery
$('.Coluna1)