html - para - ¿Color de fila de tabla alternativa utilizando CSS?
tablas en html ejemplos (9)
¿Puedo escribir mi html así con uso css?
Sí, puedes pero luego tendrás que usar el pseudo selector :nth-child() (que tiene soporte limitado):
table.alternate_color tr:nth-child(odd) td{
/* styles here */
}
table.alternate_color tr:nth-child(even) td{
/* styles here */
}
Estoy usando una tabla con el color de la fila alternativa 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 class para tr , pero quiero usar solo para table . Cuando uso la clase para la tabla, esto se aplica a 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?
Hay una forma bastante fácil de hacer esto en PHP, si entiendo su consulta, asumo que usted codifica en PHP y está usando CSS y javascript para mejorar la salida.
La salida dinámica de la base de datos llevará un bucle for para iterar los resultados que luego se cargan en la tabla. Solo agregue una llamada a la función como esta:
echo "<tr style=".getbgc($i).">"; //this calls the function based on the iteration of the for loop.
a continuación, agregue la función al archivo de la página o biblioteca
function getbgc($trcount)
{
$blue="/"background-color: #EEFAF6;/"";
$green="/"background-color: #D4F7EB;/"";
$odd=$trcount%2;
if($odd==1){return $blue;}
else{return $green;}
}
Ahora esto alternará dinámicamente entre colores en cada fila de la tabla recién generada.
Es mucho más fácil que jugar con CSS que no funciona en todos los navegadores.
Espero que esto ayude.
La mayoría de los códigos anteriores no funcionarán con la versión de IE. La solución que funciona para otros navegadores IE + es esta.
<style type="text/css">
tr:nth-child(2n) {
background-color: #FFEBCD;
}
</style>
Podemos usar reglas CSS impares e incluso el método jQuery para colores de fila alternativos
Usando 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>
Puede usar los selectores nth-child (impar / par); sin embargo, no todos los navegadores ( es decir, 6-8, ff v3.0 ) son compatibles con estas reglas, por lo que la mayoría de las soluciones recurren a algún tipo de solución javascript / jquery para agregar las clases al filas para que estos navegadores no compatibles obtengan el efecto de banda de tigre.
Simplemente agregue lo siguiente a su código html (dentro del <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.
Tienes la pseudo-clase: :nth-child() :
table tr:nth-child(odd) td{
}
table tr:nth-child(even) td{
}
En los primeros días de :nth-child() soporte de su navegador era un poco pobre. Es por eso que establecer class="odd" convirtió en una técnica tan común. A finales de 2013, me alegra decir que IE6 e IE7 finalmente están muertos (o lo suficientemente enfermos como para dejar de preocuparse), pero IE8 todavía existe, afortunadamente, es la única excepción .
$(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 de CSS, realmente un pseudo-selector, llamado nth-child. En CSS puro puedes hacer lo siguiente:
tr:nth-child(even) {
background-color: #000000;
}
Nota: No hay soporte en IE 8.
O, si tienes jQuery:
$(document).ready(function()
{
$("tr:even").css("background-color", "#000000");
});
<script type="text/javascript">
$(function(){
$("table.alternate_color tr:even").addClass("d0");
$("table.alternate_color tr:odd").addClass("d1");
});
</script>