Utilizzando CSS come modificare solo la seconda colonna di una tabella

126

Usando solo css, come posso sovrascrivere il css solo della seconda colonna di una tabella.

Posso accedere a tutte le colonne usando:

.countTable table table td

Non riesco ad accedere all'html di questa pagina per modificarlo poiché non è il mio sito.

Grazie.

css 

Risposte:

239

Puoi usare la :nth-childpseudo classe in questo modo:

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

Nota però, questo non funzionerà nei browser più vecchi (o IE), dovrai dare alle celle una classe o usare javascript in quel caso.

— Nick Craver
fonte
Questo darà solo la seconda cella in ogni tabella, non la seconda cella in ogni riga. Hai bisogno di .countTable table table tr td: nth-child (2)
— Deeksy
3
@Deeksy - Non è accurato, non importa quale sia il selettore. nth-childviene applicato dopo aver trovato l'elemento e viene nthconfrontato con qualsiasi genitore che ha, indipendentemente dal fatto che fosse nel selettore o meno. Puoi vederlo funzionare qui: jsfiddle.net/JQQPz
— Nick Craver
che ne dici di cambiare solo il css di un elemento all'interno di td: nth-child (2). Come il tag <a>. sarà td a: nth-child (2) {}?
— Ivo San
1
@ ivory-santos aggiungi semplicemente aalla fine, ad esempio td:nth-child(2) aai collegamenti di stile sotto quell'elemento.
— Nick Craver
Perché hai una tabella due volte (a differenza di altre risposte di seguito)?
— UlFie
26

Prova questo:

.countTable table tr td:first-child + td

Puoi anche ribadire per dare uno stile alle altre colonne:

.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
Ho optato per questo in una situazione in cui i proprietari del sito che mantengono il codice non erano sviluppatori e questo ha dato loro la possibilità di cambiare l'allineamento delle colonne nelle loro tabelle di dati in un modo molto semplice che sebbene un po 'prolisso, con commenti come hai qui, reso loro facile sapere quale blocco selettore era per quale colonna da sinistra. Anche in questo caso non è il modo più elegante ed efficiente, ma ha funzionato!
— Eric Bishard
18

Per modificare solo la seconda colonna di una tabella utilizzare quanto segue:

Caso generale:

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

background:red

}

Il tuo caso:

.countTable table table td + td{ 

background: red

}

Nota: funziona per tutti i browser (quelli moderni e vecchi), ecco perché ho aggiunto la mia risposta a una vecchia domanda

— Abzoozy
fonte
Quale sarebbe il tweak per selezionare solo la prima colonna? L'uso della tabella td {...} seleziona anche tutte le celle in altre colonne.
— j4v1
1
@ j4v1 table td {background: red;} // la prima colonna avrà lo sfondo rosso table td + td {background: blue;} // rest avrà il blu
— Abzoozy
-2

Puoi designare una classe per ogni cella nella seconda colonna.

<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
Non posso usarlo. Come ho detto, questa non è la mia pagina e quindi non posso cambiare l'html.
2
@ Duniyadnd questo non è un buon approccio, rispetto al modo esistente di utilizzare i selettori.
— PM
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.