¿Alterna el color de la fila de la tabla usando CSS?

Question

Estoy usando una tabla con un color de fila alternativo con esto.

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

<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 sólo para table. Cuando uso la clase para la tabla que esto se aplica en la alternativa tr.

¿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> 

¿Cómo puedo hacer que las filas tengan "rayas de cebra" usando CSS?

Answer 1

$(document).ready(function() 
 
{ 
 
    $("tr:odd").css({ 
 
    "background-color":"#000", 
 
    "color":"#fff"}); 
 
});

tbody td{ 
 
    padding: 30px; 
 
} 
 

 
tbody tr:nth-child(odd){ 
 
    background-color: #4C8BF5; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1"> 
 
<tbody> 
 
<tr> 
 
<td>1</td> 
 
<td>2</td> 
 
<td>3</td> 
 
<td>4</td> 
 
</tr> 
 
<tr> 
 
<td>5</td> 
 
<td>6</td> 
 
<td>7</td> 
 
<td>8</td> 
 
</tr> 
 
<tr> 
 
<td>9</td> 
 
<td>10</td> 
 
<td>11</td> 
 
<td>13</td> 
 
</tr> 
 
</tbody> 
 
</table>

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

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

Nota: No hay soporte en IE 8.

O, si usted tiene jQuery:

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

Answer 2

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

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

En los primeros días de su :nth-child()browser support era una especie de pobres. Es por eso que configurar class="odd" se convirtió en una técnica tan común. A finales de 2013, me alegra decir que IE6 e IE7 finalmente han muerto (o que están lo suficientemente enfermos como para dejar de preocuparse por ellos), pero IE8 todavía está presente, por suerte, es the only exception.

Answer 3

Puede usar los selectores nth-child (impares/pares), pero no todos los navegadores (ie 6-8, ff v3.0) admiten estas reglas, por eso la mayoría de las soluciones recurren a alguna forma de solución javascript/jquery para agregar las clases a las filas navegadores compatibles para obtener el efecto de rayas de tigre.

Answer 4

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

Answer 5

puede escribo mi html así con el uso css?

Sí se puede, pero entonces tendrá que utilizar el :nth-child() seudo selector (que tiene un soporte limitado sin embargo):

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

Answer 6

Hay una manera bastante fácil de hacer esto en PHP, si Entiendo tu consulta, supongo que codificas en PHP y estás usando CSS y Javascript para mejorar el resultado.

La salida dinámica de la base de datos llevará un bucle for para repetir los resultados que luego se cargan en la tabla.Sólo tiene que añadir una llamada de función a la siguiente manera:

echo "<tr style=".getbgc($i).">"; //this calls the function based on the iteration of the for loop. 

continuación, agregue la función de la página o biblioteca de archivos:

function getbgc($trcount) 
{ 

$blue="\"background-color: #EEFAF6;\""; 
$green="\"background-color: #D4F7EB;\""; 
$odd=$trcount%2; 
    if($odd==1){return $blue;} 
    else{return $green;}  

}

Ahora bien, este alternará dinámicamente entre los colores en cada nueva fila de la tabla generada

Es mucho más fácil que meterse con CSS que no funciona en todos los navegadores.

Espero que esto ayude.

Answer 7

Simplemente agregue lo siguiente a su código html (con el <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.

Answer 8

La mayoría de los códigos anteriores no funcionarán con la versión de IE. La solución que funciona para IE + otros navegadores es esta.

<style type="text/css"> 
     tr:nth-child(2n) { 
      background-color: #FFEBCD; 
     } 
</style> 

Answer 9

Podemos utilizar las reglas de pares e impares CSS y jQuery método de colores de las filas alternas

El uso de CSS

table tr:nth-child(odd) td{ 
      background:#ccc; 
} 
table tr:nth-child(even) td{ 
      background:#fff; 
} 

Usando jQuery

$(document).ready(function() 
{ 
    $("table tr:odd").css("background", "#ccc"); 
    $("table tr:even").css("background", "#fff"); 
}); 

table tr:nth-child(odd) td{ 
 
      background:#ccc; 
 
} 
 
table tr:nth-child(even) td{ 
 
      background:#fff; 
 
}

<table> 
 
    <tr> 
 
    <td>One</td> 
 
    <td>one</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Two</td> 
 
    <td>two</td> 
 
    </tr> 
 
</table>