Usando CSS, como alterar apenas a 2ª coluna de uma tabela

125

Usando apenas css, como posso substituir o css apenas da 2ª coluna de uma tabela.

Eu posso acessar todas as colunas usando:

.countTable table table td

Não consigo acessar o html nesta página para modificá-lo, pois não é o meu site.

Obrigado.

css
fonte

Respostas:

238

Você pode usar a :nth-childpseudo classe como esta:

.countTable table table td:nth-child(2)

Observe, porém, que isso não funcionará em navegadores mais antigos (ou IE); você precisará dar uma classe às células ou usar javascript nesse caso.

Nick Craver
fonte
Isso fornecerá apenas a segunda célula em cada tabela, não a segunda célula em cada linha. Você precisa de .countTable table tr trd: nth-child (2)
Deeksy
3
@ Deeksy - Isso não é preciso, não importa qual é o seletor. nth-childé aplicado depois de encontrar o elemento e é nthcomparado a qualquer pai que ele tenha, independentemente de estar no seletor ou não. Você pode ver isso funcionando aqui: jsfiddle.net/JQQPz
Nick Craver
que tal mudar apenas o css de um elemento dentro de td: nth-child (2). Como a tag <a>. será td a: enésimo filho (2) {}?
Ivo San
1
@ ivory-santos basta adicionar o ano final, por exemplo, td:nth-child(2) apara estilizar os links abaixo desse elemento.
Nick Craver
Por que você tem tabela duas vezes (diferente das outras respostas abaixo)?
UlFie
26

Tente o seguinte:

.countTable table tr td:first-child + td

Você também pode reiterar para estilizar as outras colunas:

.countTable table tr td:first-child + td + td {...} /* third column */
.countTable table tr td:first-child + td + td + td {...} /* fourth column */
.countTable table tr td:first-child + td + td + td +td {...} /* fifth column */
Marco Panichi
fonte
1
Optei por isso em uma situação em que os proprietários do site que mantinham o código não eram desenvolvedores e isso lhes deu a capacidade de alterar o alinhamento de colunas em suas tabelas de dados de uma maneira muito direta que, embora um pouco detalhada, com comentários como você aqui facilitou o conhecimento de qual bloco seletor era para qual coluna da esquerda. Novamente, não da maneira mais elegante e eficiente, mas funcionou!
Eric Bishard
18

Para alterar apenas a segunda coluna de uma tabela, use o seguinte:

Caso Geral:

table td + td{  /* this will go to the 2nd column of a table directly */

background:red

}

Seu caso:

.countTable table table td + td{ 

background: red

}

Nota: isso funciona para todos os navegadores (modernos e antigos), por isso adicionei minha resposta a uma pergunta antiga

Abzoozy
fonte
Qual seria o ajuste para selecionar apenas a primeira coluna? Usar a tabela td {...} seleciona todas as células em outras colunas também.
J4v1
1
@ mesa j4v1 td {background: red;} // primeira coluna terá tabela vermelho fundo td + td {background: blue;} // resto terá azul
Abzoozy
-2

Você pode designar uma classe para cada célula na segunda coluna.

<table>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
</table>
Duniyadnd
fonte
Eu não posso usar isso. Como eu disse, essa não é minha página e, portanto, não posso alterar o html.
2
@ Duniyadnd essa não é uma boa abordagem, em comparação com a maneira existente de usar seletores.
PM
-2

nesta web http://quirksmode.org/css/css2/columns.html achei essa maneira fácil

<table>
<col style="background-color: #6374AB; color: #ffffff" />
<col span="2" style="background-color: #07B133; color: #ffffff;" />
<tr>..
DorienCragen
fonte
1
Ele disse que não pode modificar o HTML.
Frungi