css - para - Estilo la primera columna<td> de una tabla de forma diferente

tablas en html5

Question

Si tengo una table con dos columnas, ¿cómo especifico un padding o cualquier otra CSS para que se aplique solo para la primera columna de <td> s? Además, ¿cómo doy estilo a una columna n-ésima de manera similar?

Answer 1

Esto debería ayudar. Su CSS3: primer hijo, donde debería decir que el primer tr de la tabla le gustaría diseñar. http://reference.sitepoint.com/css/pseudoclass-firstchild

Answer 2

Puede usar el selector n-ésimo niño .

para apuntar al enésimo elemento que podrías usar:

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

Answer 3

Si tiene que admitir IE7, una solución más compatible es:

/* 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;
}

También funciona bien con li ; selector general de hermanos ~ puede ser más adecuado con elementos mixtos como un encabezado h1 seguido de párrafos Y un subtítulo y luego otros párrafos.

Answer 4

Las pseudo-clases : nth-child () y : nth-of-type () le permiten seleccionar elementos con una fórmula.

La sintaxis es : nth-child (an + b) , donde reemplaza ayb por números de su elección.

Por ejemplo,: nth-child (3n + 1) selecciona al niño 1º, 4º, 7º, etc.

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

: nth-of-type () funciona igual, excepto que solo considera elementos del tipo dado (en el ejemplo).

Answer 5

Para seleccionar la primera columna de una tabla, puede usar esta sintaxis

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