Filas par e impar

[Elisa85]

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

[Raulmmmm]

Prueba a poner, en vez de table.resultats tr.impar, simplemente .impar.

[xav]

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.

[Mikmoro]

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.

[xav]

Totalmente de cuerdo Mikmoro. Es muy oportuno tu comentario.
Saludos!

[Elisa85]

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

[arriaka]

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!

[Elisa85]

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

[arriaka]

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!

[pateketrueke]

Iniciado por Elisa85

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.....
}

[arriaka]

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

Iniciado por Elisa85

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.