Aplicar un estilo diferente a la primera columna de una tabla

Si tengo un table con dos columnas, ¿cómo puedo especificar un padding o cualquier otro css para que se aplique solo para la primera columna de <td> s. También n-th columna similar?

Author: FelipeAls, 2013-03-28
Source

5 answers

Podría usar el n-ésimo selector secundario.

Para apuntar al enésimo elemento puedes usar: 

td:nth-child(n) {  
  /* your stuff here */
}
 96
Author: RRikesh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-28 05:57:13

Si tienes que soportar 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; el 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 de nuevo otros párrafos.

 8
Author: FelipeAls,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-28 06:02:31

Esto debería ayudar. Es CSS3: first-child donde debes decir que el primer tr de la tabla te gustaría estilizar. http://reference.sitepoint.com/css/pseudoclass-firstchild

 4
Author: tiantang,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-28 05:52:46

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 se reemplaza a y b por números de su elección.

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

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

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

 2
Author: MS Ibrahim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-26 11:15:47

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

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

 0
Author: Saptarshi Banerjee,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-31 09:50:16