Foros del Web » Creando para Internet » CSS »

Alternar el color de las filas de una tabla

Estas en el tema de Alternar el color de las filas de una tabla en el foro de CSS en Foros del Web. tengo una capa div como esta: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < div > < table style = "background-color: rgb(133, 133, 133);" > < ...
  #1 (permalink)  
Antiguo 19/06/2011, 08:57
 
Fecha de Ingreso: abril-2011
Mensajes: 865
Antigüedad: 5 años, 8 meses
Puntos: 5
Alternar el color de las filas de una tabla

tengo una capa div como esta:
Código HTML:
Ver original
  1. <div>
  2. <table style="background-color: rgb(133, 133, 133);">
  3. <tr>
  4.    <td>documentos</td>nombres<td></td>
  5. </tr>
  6. </div>

en esta capa muestro en pantalla todos los registros de mi base de datos el color de fonfo siempre es el mismo y lo que quiero es que sea uno del color este y otro sin en blanco osea estilo cebra.

he estado buscando por google pero no consigo realizarlo correctamente como tendria que hacerlo?podria hacerlo sin hoja de estilos directamente en el atributo table?

alguna ayuda porfavor
  #2 (permalink)  
Antiguo 19/06/2011, 09:10
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 6 meses
Puntos: 269
Respuesta: capa div con css background

yo lo hago de esta forma http://jsfiddle.net/cristian_cena/ZjkMz/ para mantener el html limpio.
  #3 (permalink)  
Antiguo 19/06/2011, 09:18
 
Fecha de Ingreso: abril-2011
Mensajes: 865
Antigüedad: 5 años, 8 meses
Puntos: 5
Respuesta: capa div con css background

hola cristian_cena gracias por contestar estoy muy verde con css y jquery no acabo de entender bien tu codigo no me podrias decir como tengo que hacerlo con la capa div que postee encima ya que yo quiero algo mas sencillo osea la primera capa de un color y la segunda sin color alguna ayuda

Última edición por roboty; 19/06/2011 a las 09:33
  #4 (permalink)  
Antiguo 20/06/2011, 01:24
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 6 meses
Puntos: 269
Respuesta: capa div con css background

hola, roboty. En nada va a influir que uses o no la capa div que nombras, así que usala tranquilo o eliminala, da igual. ya que el script trabaja sobre el id que le das a la tabla. A mi me gusta mucho esta forma de hacerlo porque no ensuciamos el html.

Lo que hace el script es añadir o quitar clases según el evento que se produzca sea "mouseover" o "mouseout", nada más das los backgrounds que quieras a esas clases (en el ejemplo .grey y .blue). Reemplaza #zebra por el id que le des a tu tabla y no te olvides de linkear jquery al documento. y listo.

Al codigo lo tomé de aca: http://www.simcomedia.com/css-and-jquery-zebra-stripes

Si jquery te resulta complicado y te sientes mejor con php puedes generarle clases a las filas de la tabla cuando haces el listado/consulta de registros (while, foreach,etc.). A todos los registros pares le das una clase llamada "par" y a los impares otra llamada "impar"

Acá un usuario comparte una función para hacerte con los numeros pares: http://www.forosdelweb.com/f18/funci...09/#post280460

y luego con css
Código CSS:
Ver original
  1. .par{background: ... ;}
  2. .impar{background: ... ;}

saludos.
  #5 (permalink)  
Antiguo 20/06/2011, 14:51
 
Fecha de Ingreso: julio-2010
Mensajes: 41
Antigüedad: 6 años, 6 meses
Puntos: 7
Respuesta: capa div con css background

También podrías utilizar CSS 3 para lograr lo mismo, aunque esto tiene como inconveniente que solo los navegadores mas modernos lo interpretan.

Código CSS:
Ver original
  1. <style type="text/css">
  2.     tr:nth-child(even) {
  3.         background: #336699;
  4.     }
  5.     tr:nth-child(odd){
  6.         background: #ff0000;
  7.     }
  8. </style>

Salu2 y espero que te sirva

Etiquetas: fondo, capas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:09.