entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Cambiar el estilo de las filas de dos en dos de una tabla únicamente en CSS

Hola comunidad, tengo una pregunta que no paro de darle vueltas y por mas que parezca fácil no consigo solucionarlo.

Bueno para hacerlo de manera alternada hago uso de este código y me funciona perfectamente:

tr:nth-child(odd){
       background-color: #B0B0B0;
       color: #000000;
}
tr:nth-child(even){
        background-color: #A0A0A0;
        color: #000000;
}

El problema reside cuando quiero que el estilo se le aplique de dos en dos filas, he investigado y se que se e pueden añadir unos numero donde va odd y even pero no consigo hacerlo y sin necesidad de aplicar estilos adicionales o jQuery entre otros procedimientos.

Espero vuestra respuesta, un saludos!

1 Respuesta

3votos

carlossevi Puntos63540

Como muy bien dices, puedes aplicar el estilo en función de evaluación de fórmulas "matemáticas" en lugar del simple odd y even. Para el caso que propones, yo solo he conseguido una solución repetiendo 2 veces la regla:

  • Una regla para las filas 2, 6, 10, 14...
  • Una regla para las filas 3, 7, 11, 15...

Igual jugando más con las posibles fórmulas y sucesiones consigues unificarlo. El código de mi prueba queda:

tr:nth-child(4n+2) {background: #CCC}
tr:nth-child(4n+3) {background: #CCC}

Lo he puesto en práctica en Jsfiddle y parece que funciona, puedes verlo aquí.

0voto

Leonardo-Tadei comentado

Excelente lo del 4n+2 y 4n+3 !

0voto

carlossevi comentado

¡Muchas gracias! En realidad no lo había puesto nunca en práctica y a mi también me ha gustado mucho descubrirlo =)

0voto

pabeni comentado

Muchísimas gracias por la solución me ha funcionado a la perfección, un saludo grandisimo!

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta