Zebra rayas una tabla con filas ocultas con CSS3?

Tengo una mesa

 
 
 
 
 
 

Intento establecer las rayas de la tabla para usar los selectores enésimo, pero parece que no pueden 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 … no puedo creerlo.

alguien pasa a lo largo de una pista?

Aquí está todo lo cerca que vas a llegar. Tenga en cuenta que no puede hacer que el recuento nth-child solo muestre filas; nth-child tomará el elemento n- ésimo hijo sin importar qué, no el enésimo hijo que coincida con un selector dado. Si desea que falten algunas filas y que no afecten a las bandas de cebra, deberá eliminarlas completamente de la tabla, ya sea a través del DOM o del lado del servidor.

   
 
 
 
 
 
 

Aquí están las soluciones que hice:

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

No es necesario especificar un selector ancestro para un selector basado en id ; solo hay un elemento que coincida con #table , por lo que solo agrega código adicional al agregar la table .

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

Ahora, [@display=block] coincidiría con los elementos que tenían una display atributo establecida en bloque, como

. La pantalla no es un atributo HTML válido; lo que parece que intenta hacer es hacer 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 darse cuenta, lo cual está en proceso de hacerlo cuando está aplicando este selector. Por lo tanto, no podrá seleccionar si se muestran las filas de la tabla. Como nth-child solo puede tomar el n- ésimo hijo sin importar qué, no n th con algún atributo, vamos a tener que renunciar a esta parte del CSS. También hay nth-of-type , que selecciona el n- ésimo 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 tienes.

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ámalo cada vez que las filas visibles sean diferentes.

  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 hazlo

 table#tableid tr.visible.odd{ background-color: #EFF3FE; } 

Si bien no puedes alinear una tabla con filas ocultas usando CSS3, puedes hacerlo con JavaScript. Aquí es 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++; } } 

Por un camino jquery, puede usar esta función que recorre las filas de su tabla, verificando la visibilidad de la fila y (re) configurando una clase para las 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 las filas impares.

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

Entonces puedes llamar a este zebra-striper siempre que uses:

 updateStriping("#mytable tr"); 

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 el inconveniente de requerir 2 reglas CSS adicionales para cada posible fila oculta. El principio es que, después de cada fila oculta, cambia el background-color de background-color de las filas pares e impares.

Aquí hay un ejemplo rápido con solo 3 filas ocultas y el CSS necesario para hasta 4 de ellas. Ya puede ver cuán difícil puede ser el CSS pero, aún así, alguien puede encontrarle utilidad:

 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; } 
 

en jquery ..

 var odd = true; $('table tr:visible').each(function() { $(this).removeClass('odd even').addClass(odd?'odd':'even'); odd=!odd }); 

Yo agrego en css:

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

y en crear tr agregar etiqueta

 style="display: table-row;" 

Códigos de Jquery para el color de cebra en la tabla html

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

Y CSS que puedes hacer

 .oddRow{background:#E3E5E6;color:black} .evenRow{background:#FFFFFF;color:black} 

Puede simular fácilmente las rayas de cebra si aplica un degradado que se repite verticalmente en la tabla primaria, 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 hay algo oculto, se repetirá sin importar qué.