¿Alternar el color de la fila de la tabla con CSS?

462

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>

Expandir fragmento

Aquí estoy usando class for tr, pero quiero usar solo para table. Cuando uso class para table, esto se aplica en tralternativa.

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

html css html-table

— Kali Charan Rajput
fuente

1

He creado una demostración utilizando todos los patrones posibles para nth-child () - xengravity.com/demo/nth-child

— xengravity

760

$(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>

Expandir fragmento

Hay un selector 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");
});

— Russell Dias
fuente

¿Es posible cambiar también el color del hipervínculo de las filas alternativas? Quiero un color de hipervínculo diferente para la fila par y otro para el impar. Gracias

— عثمان غني

44

¡Gran respuesta! Pero solo para información hay otro selector CSS que se puede usar, es decir. tr:nth-of-type(odd/even)

— Nikhil Nanjappa

2

@ عثمانغني: Sí, simplemente lo haríastr:nth-child(even) a

— Gerard

1

No funciona si escribe su html dinámicamente. Luego debe agregar clases a las filas.

— erik

En 2019: esta ya no es la mejor solución. Usa CSS puro .

— Chiramisu

158

Tienes la :nth-child()pseudoclase:

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

En los primeros días de :nth-child()su navegador, el soporte era un poco pobre. Es por eso que la configuración se 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 está presente, afortunadamente, es la única excepción.

— Álvaro González
fuente

3

Respuesta preferida ya que no aplica CSS al encabezado

— Mike

Hola, esto es tarde por un par de años, pero ¿qué hay de agregar una clase seleccionada con un color bg con jqeury a la fila de la tabla cuando se hace clic? Noté que la pseudo clase nth-child bg-color se anula cuando agrega una clase "seleccionada" con jqeury

— dutchkillsg

@dutchkillsg Esa parece ser una pregunta completamente nueva en lugar de un comentario a mi respuesta ...

— Álvaro González

Para "rayas de cebra" (es decir, vertical), simplemente intercambie tr:nth-child(odd)con td:nth-of-type(odd). Tenga en cuenta que en este caso está aplicando una pseudoclase diferente a los elementos en tdlugar de a los trelementos.

— Chiramisu

36

Simplemente agregue lo siguiente a su código html (dentro de <head>) y listo.

HTML:

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

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

— bmich72
fuente

Esta debería ser la respuesta aceptada. En la medida de lo posible, CSS debe manejar el estilo, mientras que javascript puede usarse para manejar otros asuntos.

— Tormod Haugene

No hago html a diario. #cccNo me parece un código de color válido. ¿Puedes explicar? Gracias.

— tommy.carstensen

1

@ tommy.carstensen se llama "forma hexadecimal abreviada". Básicamente #cccse expande a #cccccc, lo que significa que cada color RGB tiene el valor hexadecimal cco el valor decimal 204(es decir rgb(204, 204, 204)). Lea más sobre esto aquí -> en.wikipedia.org/wiki/Web_colors#Shorthand_hexadecimal_form

— Nick Grealy

No funciona en Chrome Versión 78.0.3904.108

— IlludiumPu36

13

¿Puedo escribir mi html de esta manera con el uso de CSS?

Sí, puede hacerlo, pero tendrá que usar el :nth-child()pseudo selector (que tiene un soporte limitado):

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

— Sarfraz
fuente

13

Podemos usar reglas CSS pares e impares y 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>

Expandir fragmento

— Santosh Khalse
fuente

10

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>

— Sriwantha Attanayake
fuente

9

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

— Pranay Rana
fuente

46

OK, sé que jQuery es bastante ubicuo en este sitio, pero independientemente de eso, no debe publicar jQuery sin explicación. Este script no funcionará solo.

— DisgruntledGoat

4

Puede usar selectores nth-child (impar / par), sin embargo, no todos los navegadores ( es decir, 6-8, ff v3.0 ) admiten estas reglas, por lo tanto, la mayoría de las soluciones recurren a alguna forma de solución javascript / jquery para agregar las clases a filas para estos navegadores no compatibles para obtener el efecto de banda de tigre.

— cuadrado rojo
fuente

3

Hay una manera bastante fácil de hacer esto en PHP, si entiendo su consulta, supongo que codifica en PHP y está utilizando CSS y JavaScript para mejorar la salida.

La salida dinámica de la base de datos llevará un bucle for para iterar a través de los resultados que luego se cargan en la tabla. Simplemente agregue una llamada de función a la siguiente:

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

luego agregue la función a la página o al archivo de la 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 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.

— marca
fuente

gracias @mark. No es una solución que el sitio esté en PHP, .net o HTML simple.

— Kali Charan Rajput