Style primo <td> colonna di una tabella differente

Question

Se ho un table con due colonne, come posso specificare un padding o qualsiasi altra css modo che sia applicata solo per la prima colonna di <td> s. Inoltre, come faccio a dare uno stile allo n. colonna allo ?

Answer 1

È possibile utilizzare lo n-th child selector.

di indirizzare il n-esimo elemento si potrebbe quindi utilizzare:

td:nth-child(n) { 
    /* your stuff here */ 
} 

Answer 2

Questo dovrebbe aiutare. Il suo CSS3: first-child in cui dovresti dire che il primo tr del tavolo che vorresti modellare. http://reference.sitepoint.com/css/pseudoclass-firstchild

Answer 3

Se hai a sostenere IE7, una soluzione più compatibile è:

/* only the cells with no cell before (aka the first one) */ 
td { 
    padding-left: 20px; 
} 
/* only the cells with at least one cell before (aka all except the first one) */ 
td + td { 
    padding-left: 0; 
} 

funziona anche bene con li; selettore di fratello generale ~ può essere più adatto con elementi misti come un'intestazione h1 seguita da paragrafi AND un sottotitolo e quindi ancora altri paragrafi.

Answer 4

Il : nth-child() e : nth-of-type() pseudo-classi consente di selezionare gli elementi con una formula.

La sintassi è : nth-child (an + b), in cui si sostituiscono a e b in base ai numeri di propria scelta.

Ad esempio,: nth-child (3n + 1) seleziona il 1 °, 4 °, 7 ° ecc. Bambino.

td:nth-child(3n+1) { 
    /* your stuff here */ 
} 

: nth-of-type() funziona allo stesso, tranne che considera solo elemento del tipo dato (nell'esempio).

Answer 5

per selezionare la prima colonna di una tabella è possibile utilizzare questa sintassi

tr td: nth-child (1n + 2) {padding-left: 10px;}