Usando CSS cómo cambiar solo la segunda columna de una tabla

126

Usando css solo, ¿cómo puedo anular el css de solo la segunda columna de una tabla?

Puedo acceder a todas las columnas usando:

.countTable table table td

No puedo acceder al html de esta página para modificarlo, ya que no es mi sitio.

Gracias.

css
fuente

Respuestas:

239

Puede usar la :nth-childpseudo clase de esta manera:

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

Sin embargo, tenga en cuenta que esto no funcionará en navegadores más antiguos (o IE), tendrá que dar una clase a las celdas o usar javascript en ese caso.

Nick Craver
fuente
Esto solo dará la segunda celda en cada tabla, no la segunda celda en cada fila. Necesita .countTable table table tr td: nth-child (2)
Deeksy
3
@Deeksy: eso no es exacto, no le importa cuál sea el selector. nth-childse aplica después de encontrar el elemento, y se nthcompara con cualquier padre que tenga, sin importar si estaba en el selector o no. Puede ver esto trabajando aquí: jsfiddle.net/JQQPz
Nick Craver
¿qué tal cambiar solo el css de un elemento dentro de td: nth-child (2). Me gusta <a> etiqueta. ¿va a ser td a: nth-child (2) {}?
Ivo San
1
@ ivory-santos solo agregue el aal final, por ejemplo, td:nth-child(2) aa los enlaces de estilo debajo de ese elemento.
Nick Craver
¿Por qué tiene la tabla dos veces (a diferencia de otras respuestas a continuación)?
UlFie
26

Prueba esto:

.countTable table tr td:first-child + td

También podría reiterar para dar estilo a las otras columnas:

.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
fuente
1
Opté por esto en una situación en la que los propietarios del sitio que mantenían el código no eran desarrolladores y esto les dio la posibilidad de cambiar la alineación de las columnas en sus tablas de datos de una manera muy directa que, aunque un poco detallada, con comentarios como aquí, les facilitó saber qué bloque de selección era para qué columna desde la izquierda. De nuevo, no es la forma más elegante y eficiente, ¡pero funcionó!
Eric Bishard
18

Para cambiar solo la segunda columna de una tabla, use lo siguiente:

Caso general:

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

background:red

}

Tu caso:

.countTable table table td + td{ 

background: red

}

Nota: esto funciona para todos los navegadores (modernos y antiguos) por eso agregué mi respuesta a una pregunta anterior

Abzoozy
fuente
¿Cuál sería el ajuste para seleccionar la primera columna? El uso de la tabla td {...} selecciona también todas las celdas en otras columnas.
j4v1
1
@ j4v1 tabla td {fondo: rojo;} // la primera columna tendrá el fondo rojo tabla td + td {fondo: azul;} // el resto tendrá azul
Abzoozy
-2

Puede designar una clase para cada celda en la segunda columna.

<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
fuente
No puedo usar esto. Como dije, esta no es mi página y, por lo tanto, no puedo cambiar el html.
2
@Duniyadnd este no es un buen enfoque, en comparación con la forma existente de usar selectores.
PM
-2

en esta web http://quirksmode.org/css/css2/columns.html encontré esa manera fácil

<table>
<col style="background-color: #6374AB; color: #ffffff" />
<col span="2" style="background-color: #07B133; color: #ffffff;" />
<tr>..
DorienCragen
fuente
1
Dijo que no puede modificar el HTML.
Frungi