Foros del Web » Creando para Internet » CSS »

Filas par e impar

Estas en el tema de Filas par e impar en el foro de CSS en Foros del Web. Hola, soy bastante nueva con esto de css pero necesito solucionar algo, tengo definido un estilo para las tablas que tienen que mostrar resultados de ...
  #1 (permalink)  
Antiguo 06/04/2008, 13:47
 
Fecha de Ingreso: marzo-2007
Ubicación: España
Mensajes: 133
Antigüedad: 10 años, 9 meses
Puntos: 0
Filas par e impar

Hola,
soy bastante nueva con esto de css pero necesito solucionar algo, tengo definido un estilo para las tablas que tienen que mostrar resultados de una consulta en una base de datos:

Código:
table.resultats {
border: 1px solid #ccc;
width: 750px;
margin: 20px auto;
table-layout:fixed;
font-family:Verdana, Arial, Helvetica, sans-serif;
}


table.resultats td {
font: "Trebuchet MS", Tahoma, Arial, sans-serif;
font-size:10px;
color: #666;
background: #fff;
text-align: left;
padding: 5px;
border-top: 1px dotted #eee;
}

table.resultats th {
font: Georgia, "Times New Roman", Times, serif;
color:#000000;
background-color:#0099FF;
text-align: left;
padding: 3px;
font-size:12px;
}

Entonces yo querría poder definir las filas pares, solo que tenga un color diferente a las otras filas, pero no se como se hace y me lío bastante.
He probado a hacer 

table.resultats tr.impar {
background-color:#339922;
}

y al usarlo, <tr class="impar"> pero nada, y no se si estoy fallando al usarlo o al definirlo.

Muchas gracias
  #2 (permalink)  
Antiguo 06/04/2008, 14:35
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Filas par e impar

Prueba a poner, en vez de table.resultats tr.impar, simplemente .impar.
  #3 (permalink)  
Antiguo 06/04/2008, 17:37
xav
 
Fecha de Ingreso: enero-2006
Ubicación: Argentina
Mensajes: 79
Antigüedad: 11 años, 10 meses
Puntos: 1
Re: Filas par e impar

Hola, en un principio pensé que la única forma de hacer esto era dando un id diferente a cada fila según sean pares e impares pero según lo que leí la forma de hacerlo sería usando el selector 'nth-child' que se usa de la sig. maera:

tr:nth-child(even) {background-color: #FFCC66 }
tr:nth-child(odd) {background-color: #CCCCCC}

este selector fué introducido en 2001 y hasta el momento en que se escribió el artículo que leí (2003) no era soportado por los navegadores. Aparentemente sigue sin ser soportado ya que no encontré manera de que funcione ni en Opera v9.10 (2006), ni en Netscape v9.0.0.5 (2007), ni en Firefox v2.0.0.13 (2008).
Asi que sigo pensando que la única manera de conseguirlo es dando un id a las filas pares y otro a las impares. Esto puede hacerse manualmente (cosa engorrosa si son muchas) o automáticamente si las filas de la tabla son resultados obtenidos mediante php-mysql.
Espero te sirva de ayuda.
Saludos.
Javier desde Argentina.
  #4 (permalink)  
Antiguo 06/04/2008, 18:22
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Filas par e impar

Hola, xav. Un pequeño apunte:

es preferible darles un class que un id, ya que id se usa como identificador único para un elemento, y class puede ser usado por varios, de manera que poniendo class="par" y class="impar", por ejemplo, podrá ser aplicado a todas las pares e impares sin problema.

Lo apunto porque Elisa85 dice ser bastante nueva en css, y lo del id podría llevarle a engaño.

Mikel.
  #5 (permalink)  
Antiguo 06/04/2008, 20:48
xav
 
Fecha de Ingreso: enero-2006
Ubicación: Argentina
Mensajes: 79
Antigüedad: 11 años, 10 meses
Puntos: 1
Re: Filas par e impar

Totalmente de cuerdo Mikmoro. Es muy oportuno tu comentario.
Saludos!
  #6 (permalink)  
Antiguo 08/04/2008, 19:07
 
Fecha de Ingreso: marzo-2007
Ubicación: España
Mensajes: 133
Antigüedad: 10 años, 9 meses
Puntos: 0
Re: Filas par e impar

Hola!

Hmm bueno, entonces creo que el problema lo tengo al definir diferentes tipos de filas (par/impar) para una tabla que he definido...

luego al usarlo si que usaria <tr class="???">...

pero no sé como hacerlo, de momento lo tengo "a saco" en el codigo donde lo uso pero claro tampoco es muy limpio eso
  #7 (permalink)  
Antiguo 08/04/2008, 19:44
Avatar de arriaka  
Fecha de Ingreso: febrero-2008
Mensajes: 45
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Filas par e impar

Hola Elisa85

Por lo que he leido, creo que todavia no has conseguido diferenciar las filas. El problema que tienes es que el color se lo tienes que dar a los td, no a los tr. El codigo seria el siguiente:

Código:
table.resultats tr.impar td{
	background-color:#339922;
}
Es decir, el html seria algo asi:

Código HTML:
<table class="resultats">
	<tr>
		<th>Columna 1</th>
		<th>Columna 2</th>
	</tr>
	<tr class="impar">
		<td>Fila inpar 1</td>
		<td>Fila inpar 2</td>
	</tr>
	<tr class="par">
		<td>Fila par 1</td>
		<td>Fila par 2</td>
	</tr>
</table> 
Saludos!
  #8 (permalink)  
Antiguo 10/04/2008, 05:10
 
Fecha de Ingreso: marzo-2007
Ubicación: España
Mensajes: 133
Antigüedad: 10 años, 9 meses
Puntos: 0
Re: Filas par e impar

Muchas gracias arriaka, eso funcionó, aunque no entiendo por qué tiene que ser

table.resultats tr.impar td{
background-color:#339922;
}

con el td, y luego se aplica en el tr
  #9 (permalink)  
Antiguo 10/04/2008, 07:16
Avatar de arriaka  
Fecha de Ingreso: febrero-2008
Mensajes: 45
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Filas par e impar

Hola Elisa85

Digamos que habria dos posibles soluciones, y la que has usado era con la que menos codigo tenias que cambiar. La otra puede que sea mas facil de entender, aunque tendrias que cambiar mas codigo:

Código:
table.resultats tr td.impar{
    background-color:#339922;
}
Código HTML:
<table class="resultats">
    <tr>
        <th>Columna 1</th>
        <th>Columna 2</th>
    </tr>
    <tr>
        <td class="impar">Fila inpar 1</td>
        <td class="impar">Fila inpar 2</td>
    </tr>
    <tr>
        <td class="par">Fila par 1</td>
        <td class="par">Fila par 2</td>
    </tr>
</table> 
Lo que pasa es que en el del otro dia la "diferencia" en el html la aplicas en los tr y en el css el estilo se lo das a los td que esten dentro de estor tr "diferenciados", mientras que en este codigo la "diferencia" en el html la aplicas directamente en los td y en el CSS tambien directamente en los td.

Espero que se me entienda...

Saludos!
  #10 (permalink)  
Antiguo 11/04/2008, 01:18
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 9 años, 8 meses
Puntos: 2526
Re: Filas par e impar

Cita:
Iniciado por Elisa85 Ver Mensaje
Muchas gracias arriaka, eso funcionó, aunque no entiendo por qué tiene que ser

table.resultats tr.impar td{
background-color:#339922;
}

con el td, y luego se aplica en el tr
de echo, deberia bastar con table.resultats tr.impar {
backg.....
}
  #11 (permalink)  
Antiguo 11/04/2008, 05:48
Avatar de arriaka  
Fecha de Ingreso: febrero-2008
Mensajes: 45
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Filas par e impar

Dandole background al tr.impar no es suficiente. De hecho, con eso empezo todo este tema.

Cita:
Iniciado por Elisa85 Ver Mensaje
Entonces yo querría poder definir las filas pares, solo que tenga un color diferente a las otras filas, pero no se como se hace y me lío bastante.
He probado a hacer
Código:
table.resultats tr.impar {
background-color:#339922;
}
y al usarlo, <tr class="impar"> pero nada, y no se si estoy fallando al usarlo o al definirlo.
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 17:24.