Zebra striping ¿una tabla con filas ocultas usando CSS3?

Tengo una mesa

<table id="mytable">
    <tr style="display: none;"><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr style="display: none;"><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
 </table>

Estoy tratando de configurar la tabla de rayas para usar selectores n-ésimo hijo, pero parece que no puedo descifrarlo. 

 table #mytable tr[@display=block]:nth-child(odd) { 
      background-color:  #000;  
 }
 table #mytable tr[@display=block]:nth-child(odd) { 
      background-color:  #FFF;
 }

Estoy bastante seguro de que estoy cerca ... parece que no puedo descifrarlo.

¿Alguien pasó una pista?

Author: John Smith, 2010-09-23
Source

9 answers

Aquí está lo más cerca que vas a estar. Tenga en cuenta que no puede hacer que nth-child cuente solo las filas mostradas; nth-child tomará el elemento secundario nsin importar qué, no el elemento secundario nth que coincida con un selector dado. Si desea que falten algunas filas y no afecten a las rayas de zebra, tendrá que eliminarlas de la tabla por completo, ya sea a través del DOM o en el lado del servidor.

<!DOCTYPE html>
<style>
#mytable tr:nth-child(odd) { 
      background-color:  #000;  
 }
#mytable tr:nth-child(even) { 
      background-color:  #FFF;
 }
</style>
<table id="mytable">
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td></tr>
 </table>

Aquí están las correcciones que hice: 

 table #mytable tr[@display=block]:nth-child(odd) { 
      background-color:  #000;  
 }

No hay necesidad de especifique un selector de antepasado para un selector basado en id; solo hay un elemento que coincidirá con #table, por lo que solo está agregando código adicional agregando el table en.

 #mytable tr[@display=block]:nth-child(odd) { 
      background-color:  #000;  
 }

Ahora, [@display=block] coincidiría con elementos que tenían un atributo display establecido en bloque, como <tr display=block>. Display no es un atributo HTML válido; lo que parece estar tratando de hacer es que el selector coincida con el estilo del elemento, pero no puede hacerlo en CSS, ya que el navegador necesita aplicar los estilos desde el CSS antes de que pueda averiguar eso, que está en el proceso de hacer cuando se está aplicando este selector. Por lo tanto, no podrá seleccionar si se muestran las filas de la tabla. Dado que nth-child solo puede tomar el hijo n sin importar qué, no n con algún atributo, vamos a tener que renunciar a esta parte del CSS. También está nth-of-type, que selecciona el n hijo del mismo tipo de elemento, pero eso es todo lo que puede hacer.

 #mytable tr:nth-child(odd) { 
      background-color:  #000;  
 }

, Y ahí lo tienen.

 19
Author: Brian Campbell,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-22 22:20:37

Si está utilizando jQuery para cambiar la visibilidad de las filas, puede aplicar la siguiente función a la tabla para agregar una clase .odd cuando corresponda. Llámelo cada vez que las filas visibles es diferente.

        function updateStriping(jquerySelector){
            $(jquerySelector).each(function(index, row){
                $(row).removeClass('odd');
                if (index%2==1){ //odd row
                    $(row).addClass('odd');
                }
            });
        }

Y para el css simplemente hacer

table#tableid tr.visible.odd{
    background-color: #EFF3FE;
}
 3
Author: Zak Henry,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-12-20 02:20:37

Si bien no puede Zebra raya una tabla con filas ocultas usando CSS3, puede hacerlo con JavaScript. Aquí está cómo:

    var table = document.getElementById("mytable");
    var k = 0;
    for (var j = 0, row; row = table.rows[j]; j++) {
        if (!(row.style.display === "none")) {
            if (k % 2) {
                row.style.backgroundColor = "rgba(242,252,244,0.4)";
            } else {
                row.style.backgroundColor = "rgba(0,0,0,0.0)";
            }
            k++;
        }
    }
 2
Author: JSWilson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-02 23:29:24

Para una forma jquery, puede usar esta función que itera a través de las filas de su tabla, verificando la visibilidad de la fila y (re)estableciendo una clase para filas impares visibles.

    function updateStriping(jquerySelector) {
        var count = 0;
        $(jquerySelector).each(function (index, row) {
            $(row).removeClass('odd');
            if ($(row).is(":visible")) {
                if (count % 2 == 1) { //odd row
                    $(row).addClass('odd');
                }
                count++;
            }            
        });
    }

Use css para establecer un fondo para filas impares.

#mytable tr.odd { background: rgba(0,0,0,.1); }

Entonces puedes llamar a este zebra-striper cuando quieras usando: 

updateStriping("#mytable tr");
 1
Author: Stalzer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-06 21:10:34

Se me ocurrió una especie de solución, pero depende del hecho de que la tabla solo puede tener un número máximo de filas ocultas y viene con la desventaja de requerir 2 reglas CSS adicionales para cada posible fila oculta. El principio es que, después de cada fila oculta, se cambia el background-color de las filas impares e pares.

Aquí hay un ejemplo rápido con solo 3 filas ocultas y el CSS necesario para hasta 4 de ellas. Ya se puede ver lo difícil que puede llegar a ser el CSS, pero, todavía, alguien puede encontrar algún uso para ello: 

table{
  background:#fff;
  border:1px solid #000;
  border-spacing:1px;
  width:100%;
}
td{
  padding:20px;
}
tr:nth-child(odd)>td{
  background:#999;
}
tr:nth-child(even)>td{
  background:#000;
}
tr[data-hidden=true]{
  display:none;
}
tr[data-hidden=true]~tr:nth-child(odd)>td{
  background:#000;
}
tr[data-hidden=true]~tr:nth-child(even)>td{
  background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
  background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
  background:#000;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
  background:#000;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
  background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
  background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
  background:#000;
}
<table>
  <tbody>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr data-hidden="true"><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr data-hidden="true"><td></td><td></td></tr>
    <tr data-hidden="true"><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
  </tbody>
</table>
 1
Author: Shaggy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-27 14:24:36

En jquery ..

var odd = true; 
$('table tr:visible').each(function() {   
  $(this).removeClass('odd even').addClass(odd?'odd':'even'); 
  odd=!odd 
});
 0
Author: commonpike,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-25 23:26:01

Añado en css: 

tr[style="display: table-row;"]:nth-child(even) {
      background-color:  #f3f6fa;  
}

Y en crear tr añadir en la etiqueta

style="display: table-row;"
 -1
Author: Anton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-19 08:26:09

Jquery codes for zebra color in html table 

$("#mytabletr:odd").addClass('oddRow');
$("#mytabletr:even").addClass('evenEven');

Y CSS se puede hacer

.oddRow{background:#E3E5E6;color:black}
.evenRow{background:#FFFFFF;color:black}
 -1
Author: Rameshwar Chaturvedi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-08 14:10:49

Puede falsificar fácilmente las rayas de cebra si aplica un gradiente que se repite verticalmente en la tabla principal, colocado exactamente para que coincida con la altura de las filas (las filas tendrían que ser transparentes). De esa manera a la mesa no le importará si algo está oculto, se repetirá sin importar qué.

 -1
Author: rale09,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-11 18:29:52