408 votos

¿Color de fila de tabla alternativo usando CSS?

Estoy usando una tabla con color de fila alternos con esto.

CSS:

tr.d0 td {
    background-color: #CC9999; color: black;
}
tr.d1 td {
    background-color: #9999CC; color: black;
}

HTML:

<table>
<tr class="d0"><td>One</td><td>one</td></tr>
<tr class="d1"><td>Two</td><td>two</td></tr>
</table>

Aquí estoy usando clase para tr , pero quiero usar solo para table . ¿Cuándo usar clase de tabla que esto aplica en tr alternativa.

¿Puedo escribir mi HTML así usando CSS?

<table class="alternate_color">
    <tr><td>One</td><td>one</td></tr>
    <tr><td>Two</td><td>two</td></tr>
    </table>

¿Hay una manera de hacer así?

710voto

Russell Dias Puntos 17162

Hay un selector CSS, realmente un pseudo selector, llamado a nth-child. En CSS puro puede hacer lo siguiente:

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

Nota: No hay soporte en IE 8.

O bien, si tienes jQuery:

$(document).ready(function()
{
  $("tr:even").css("background-color", "#000000");
});

116voto

Álvaro G. Vicario Puntos 57607

Usted tiene :nth-child() pseudo-clase:

table tr:nth-child(odd) td{
}
table tr:nth-child(even) td{
}

En los primeros días de :nth-child() de su navegador apoyo fue una especie de mal. Es por eso que el ajuste class="odd" se convirtió en una técnica común. A finales de 2013 me alegra decir que IE6 y IE7 finalmente están muertos (o lo suficientemente enfermo como para dejar de preocuparse), pero IE8 es todavía alrededor-gracias a dios, es la única excepción.

29voto

bmich72 Puntos 31

Sólo añadir lo siguiente a su código html (dentro de la <head> ) y listo.

HTML:

<style>
      tr:nth-of-type(odd) {
      background-color:#ccc;
    }
</style>

Más fácil y más rápido que los ejemplos de jQuery.

12voto

Sarfraz Puntos 168484

¿Puedo escribir mi html así con el uso de css?

Sí se puede, pero entonces tendrás que utilizar el :nth-child() pseudo selector (que aunque haya limitado apoyo):

table.alternate_color tr:nth-child(odd) td{
   /* styles here */
}
table.alternate_color tr:nth-child(even) td{
   /* styles here */
}

9voto

Pranay Rana Puntos 69934
<script type="text/javascript">
$(function(){
  $("table.alternate_color tr:even").addClass("d0");
   $("table.alternate_color tr:odd").addClass("d1");
});
</script>

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X