Dev Faq
8
votes

Zèbre en train de rayer une table Flexbox avec des articles d'emballage

Je cherche le moyen le plus simple de Zebra Stripe les rangées sur la table flexbox réactive suivante.

En d'autres termes, rangées 2 et 4 dans cet exemple, mais illimité, je ne sais pas combien de rangées il y aura Soyez parce que c'est pour un composant réutilisable dans un système CMS. p>

Le HTML ne peut pas changer, mais le nombre de lignes et de colonnes changera souvent. Je suis content de définir une limite sur les colonnes mais pas des lignes. P>

existe-t-il un moyen de le faire dans pure CSS? P>

p> 

<div class="Rtable">

  <div style="order:1;" class="Rtable-cell"><h3>Eddard Stark</h3></div>
  <div style="order:2;" class="Rtable-cell">Has a sword named Ice</div>
  <div style="order:3;" class="Rtable-cell">No direwolf</div>
  <div style="order:4;" class="Rtable-cell">Male</div>
  <div style="order:5;" class="Rtable-cell"><strong>Lord of Winterfell</strong></div>

  <div style="order:1;" class="Rtable-cell"><h3>Jon Snow</h3></div>
  <div style="order:2;" class="Rtable-cell">Has a sword named Longclaw</div>
  <div style="order:3;" class="Rtable-cell">Direwolf: Ghost</div>
  <div style="order:4;" class="Rtable-cell">Male</div>
  <div style="order:5;" class="Rtable-cell"><strong>Knows nothing</strong></div>

  <div style="order:1;" class="Rtable-cell"><h3>Arya Stark</h3></div>
  <div style="order:2;" class="Rtable-cell">Has a sword named Needle</div>
  <div style="order:3;" class="Rtable-cell">Direwolf: Nymeria</div>
  <div style="order:4;" class="Rtable-cell">Female</div>
  <div style="order:5;" class="Rtable-cell"><strong>No one</strong></div>

</div>

1 commentaires

Pouvons-nous clarifier: 1. Voulez-vous vraiment dire que le nombre de colonnes changera? Vos données semblent avoir un motif. 2. Pourquoi ne pouvez-vous pas utiliser une table? Contrairement à la croyance populaire, les tables peuvent également être respectueuses. 3. Vous réalisez que si tous les sous-éléments ont la même classe, vous pouvez vous dispenser avec la classe et utiliser un sélecteur tel que .rtable> div ?

3 Réponses :

-1
votes

Si je vous ai raison et que vous voulez dire que vous voulez que vous souhaitiez des rangées de rayures zébrées sur le numéro 2, 4, ...

Pour la rangée de rayures Zebra Numéro deux, vous devez changer la couleur de fond de 2, 5, 7, ... Donc, la réponse serait RTABLE> DIV: NT-ENFANT (5N + 2) {Couleur de fond: #CCC; } . Pour la 4ème ligne, la formule serait Nth-enfant (5n + 4) et ainsi de suite.

Pour les cas dans lesquels vous souhaitez répéter le processus d'illimité, vous devez utiliser un préprocesseur comme SASS ou utiliser JavaScript. Sinon, la seule option de CSS est de savoir précisément quelles lignes doivent être rayées.

2 commentaires

Vous êtes correct que nth-enfant (5n + 2) rayera une rangée impair. Cependant, le CSS doit définir le nombre de lignes à l'avance et il n'y a aucun moyen que je puisse le savoir pour une réutilisable composant. De plus, il nécessite une ligne unique de CSS pour chaque deuxième rangée. Ce que je suis après est une solution définie pour n'importe quel nombre de lignes.

Cela n'a pas pu être fait en utilisant CSS. JavaScript aidera. Si vous êtes ouvert à une solution JS, je peux en offrir un.

1
votes

Idéalement, le sélecteur que vous souhaitez ciblerait les valeurs paires contenues dans l'attribut code> style code>. Quelque chose comme ceci: xxx pré>

Fondamentalement, ce sélecteur de fantasy dit: cible toutes les divs avec un attribut de style fort> contient strong> ( * code> ) Les valeurs "ordre" et un nombre pair em>. p>

Il pourrait être simplifié à juste: p> xxx pré>

mais ce genre de magie CSS n'existe pas, à ma connaissance. ( Selectors CSS 3 Liste complète ) P>

sélectors 4 offre une amélioration : Nth-enfant () code> strong> pseudo-classe , qui peut être en mesure d'accomplir ce rayures de zèbre. Mais ce n'est pas prêt pour la première fois. P>

Pour l'instant, je dirais la méthode CSS la plus simple pour accomplir votre objectif ... P>

Je cherche le moyen le plus simple des lignes de rayures Zebra dans la table Flexbox réactive suivante. P> BlockQuote>

... Serait à Ajoutez une classe à chaque élément avec un ordre même de commande code> valeur forte>. P>

et avec un léger réglage de votre requête de support, la bande zébrée fonctionne sur différentes tailles d'écran. P>

p> 

<div class="Rtable">

  <div style="order:1;" class="Rtable-cell"><h3>Eddard Stark</h3></div>
  <div style="order:2;" class="Rtable-cell stripe">Has a sword named Ice</div>
  <div style="order:3;" class="Rtable-cell">No direwolf</div>
  <div style="order:4;" class="Rtable-cell stripe">Male</div>
  <div style="order:5;" class="Rtable-cell"><strong>Lord of Winterfell</strong></div>

  <div style="order:1;" class="Rtable-cell"><h3>Jon Snow</h3></div>
  <div style="order:2;" class="Rtable-cell stripe">Has a sword named Longclaw</div>
  <div style="order:3;" class="Rtable-cell">Direwolf: Ghost</div>
  <div style="order:4;" class="Rtable-cell stripe">Male</div>
  <div style="order:5;" class="Rtable-cell"><strong>Knows nothing</strong></div>

  <div style="order:1;" class="Rtable-cell"><h3>Arya Stark</h3></div>
  <div style="order:2;" class="Rtable-cell stripe">Has a sword named Needle</div>
  <div style="order:3;" class="Rtable-cell">Direwolf: Nymeria</div>
  <div style="order:4;" class="Rtable-cell stripe">Female</div>
  <div style="order:5;" class="Rtable-cell"><strong>No one</strong></div>

</div>

6 commentaires

J'ai besoin de la bande pour être présent à toutes les tailles d'écran

La bande de ma réponse est présente à toutes les tailles d'écran.

Oh ok, je vois ce que tu as fait là-bas. Oui, la bande manuelle avec une classe est une solution possible mais pourrait devenir désordonnée si des lignes sont insérées plus tard. Je suppose que vous devriez ré-appliquer la bande de tous les changements.

@davidelrizzo, pas besoin de réappliquer la bande. Et pas désordonné du tout. Seuls les valeurs de commande les moins numérotées, obtenez la bande. Donc, vous pourriez avoir une règle où chaque fois qu'un div obtient une valeur de commande même , il reçoit également la classe .jetrpe .

C'est un bon point. Cela fonctionne également lorsque la table est au format horizontal. Je pense que vous avez offert la meilleure solution ici. On dirait que Nth-enfant ne peut pas rayer dans des modèles comme je cherchais.

Nth-enfant () compte les éléments DOM. Peu importe ce que CSS commande (ou même affichage: Aucun ) fait, Nth-enfant ne se soucie que de la commande source. Peut-être qu'un jour, nous aurons nth-ordre () ;-)

-1
votes

Vous n'avez pas précisé que cela devait mettre à l'échelle pour les colonnes infinies, seules des lignes infinies, afin que vous puissiez 4 règles pour chaque colonne pour sélectionner chaque seconde cellule, c'est-à-dire: xxx

si vous " En utilisant un préprocesseur comme moins, vous pouvez en faire un mixin: xxx

1 commentaires

J'ai besoin de rayer les rangées et non les colonnes. Cette méthode ne fonctionnera pas pour les lignes car je ne peux pas connaître le nombre de lignes à l'avance et cela pourrait être important.

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor