Problema con rayas de cebra en una mesa con niños con CSS

Tengo un problema en el que no puedo decidir cuál es la mejor manera de poner rayas de cebra en mi árbol con css.

El problema surge porque cuando hace clic en un nodo en el árbol, sus elementos secundarios se ocultarán, pero seguirán contando para los selectores de "elementos impares frente a pares". Una posibilidad es omitir eso escribiendo selectores que cuenten los hijos y los padres por separado y comiencen los hijos con el color opuesto de su padre, pero si tiene un número par de hijos, el último será del mismo color que el próximo padre.

Entonces, para hacer las cosas un poco más fáciles de entender:

[Principal - franja gris]
[secundario - blanco]
[secundario - gris]
[secundario-blanco]
[Principal2 - blanco]

El problema viene donde los padres alternan las rayas, quiero evitarlo para que los niños y los padres que siguen después no sean del mismo color.

En pocas palabras, esto no se puede resolver usando css a menos que agreguemos y eliminemos filas físicamente, lo que requerirá que cambiemos la implementación de la tabla que estamos usando.

¿Alguien sabe de una mejor manera de resolver este problema?

¿Puedes usar un tercer color o un knockout para el padre y solo rayar a los hijos?
No lo vuelva a publicar, pero en el futuro las preguntas basadas en código probablemente se adapten mejor a stackoverflow . Aquí hay un montón de duplicados .
¿Cómo está estructurado tu HTML? Un JSfiddle sería útil
Esta pregunta debería estar en el desbordamiento de la pila.

Respuestas (3)

No sé si esta es una opción viable para usted, pero modificaría el estilo para que quede claro qué filas son secundarias. En lugar de dos colores para las rayas de cebra, usaría cuatro. También usaría tablas anidadas:

ejemplo de rayas de cebra

Todavía hay una colisión par/impar, pero todavía es legible para mí de esta manera. Así es como se vería contraído:

rayas de cebra colapsadas

demostración de JSFiddle

Simplemente use una clase separada para las filas principales.

Con una clase separada en las filas principales, puede controlarlas de forma independiente. Desde un punto de vista visual, en mi opinión, las filas principales no deberían tener el mismo tono que las filas secundarias estándar. Aquí hay un ejemplo:

instantánea

table { width: 80%; margin: 40px;}
td { padding: 6px 10px; }
tr.parent:nth-of-type(2n+1) { background:#a00; }
tr.parent:nth-of-type(3n+0) { background:#00a; }
tr.parent:nth-of-type(3n+1) { background:#a00; }
tr:nth-child(odd) { background:#fff; }
tr:nth-child(even) { background:#eee; }

Demostración en vivo aquí

Por supuesto, puede alargarse un poco si su mesa es grande. En ese caso, jquery puede ser un mejor ajuste o una codificación rígida en clases separadas para alternar las filas principales. Gran parte de lo que es posible depende de la estructura HTML.

Esto puede funcionar, pero si hay relaciones padre/hijo en los datos, la tabla necesitará algo de trabajo para marcarla y que sea accesible correctamente. Sugeriría no hacer que las filas principales formen parte de una tabla más grande, sino que quizás se dirijan a tablas individuales. (Pero todo depende del contenido, por supuesto).
De acuerdo, es por eso que agregué que la estructura HTML marcará la diferencia.

Usa CSS3 y el nth-childselector

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

Más referencia aquí o aquí

Problema con rayas de cebra en una mesa con niños con CSS
RespuestasAquíPolítica de privacidad1y, 0v