Solo utilizzando css, come posso eseguire l'override del css solo della seconda colonna di una tabella.Utilizzo di CSS come modificare solo la 2a colonna di una tabella
posso arrivare a tutte le colonne che utilizzano:
.countTable table table td
non posso arrivare al HTML in questa pagina per modificarlo dal momento che non è il mio sito.
Grazie.
È possibile utilizzare la classe :nth-child pseudo come questo:
.countTable table table td:nth-child(2)
notare, però, questo non funzionerà nei browser meno recenti (o IE), è necessario dare alle cellule una classe o usare javascript in quel caso.
È possibile 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>
Non posso usare questo. Come ho detto, questa non è la mia pagina e quindi non posso cambiare l'html. –
@Duniyadnd questo non è un buon approccio, rispetto al modo esistente di utilizzare i selettori. –
Prova questo:
.countTable table tr td:first-child + td
Si potrebbe anche ribadire in modo per lo stile degli altri 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 */
Ho optato per questo in una situazione in cui i proprietari del sito che gestivano il codice non erano sviluppatori e questo dava loro la possibilità di cambiare l'allineamento delle colonne nelle loro tabelle di dati in un modo molto semplice, anche se un po 'prolisso, con commento come hai fatto qui, ha reso facile per loro sapere quale blocco di selezione era per quale colonna da sinistra. Ancora una volta non il modo più elegante ed efficiente, ma ha funzionato! –
Per modificare solo la seconda colonna di una tabella utilizzare il seguente:
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: questo funziona per tutti i browser (quelli moderni e vecchi) Ecco perché ho aggiunto la mia risposta a una vecchia questione
Quale sarebbe il tweak per selezionare solo la prima colonna? L'uso della tabella td {...} seleziona anche tutte le celle in altre colonne. – j4v1
@ j4v1 tabella td {background: rosso;} // prima colonna avrà sfondo rosso tabella td + td {background: blu;} // resto avrà blu – Abzoozy
lol tutti e la loro fantasia non necessaria – Unrelated
su questo web http://quirksmode.org/css/css2/columns.html i trovato in modo semplice
<table>
<col style="background-color: #6374AB; color: #ffffff" />
<col span="2" style="background-color: #07B133; color: #ffffff;" />
<tr>..
Ha detto che puo ' t modificare l'HTML. – Frungi
Questo darà solo la seconda cella in ogni tabella, non la s cella econd in ogni riga. Hai bisogno di. Table table table Ttr: nth-child (2) – Deeksy
@Deeksy - Non è accurato, non importa quale sia il selettore. 'nth-child' viene applicato dopo aver trovato l'elemento, ed è' nth' rispetto a qualunque genitore abbia, non importa se fosse nel selettore o meno. Puoi vedere questo funziona qui: http://jsfiddle.net/JQQPz/ –
Ma chi usa i browser più vecchi o IE? ;) – Duncan