Zebra条带化包含项目的flexbox表 [英] Zebra striping a flexbox table with wrapping items

问题描述

换句话说，在这个例子中，第2行和第4行，但是在这个例子中，无限制，我不知道将有多少行，因为这是一个CMS系统中的可重用组件。

HTML不能更改，但行数和列将经常更改。我很高兴对列而不是行设置限制。

在纯CSS中有办法吗？

  .Rtable {display：flex; flex-wrap：wrap;}。Rtable-cell {box-sizing：border-box; flex：33.33％; margin：-1px 0 0 -1px; padding：5px 10px; border：solid 1px slategrey;} h3 {margin：0; } @media all和（max-width：500px）{.Rtable {display：block; }}  

 < div class =Rtable> < div style =order：1; class =Rtable-cell>< h3> Eddard Stark< / h3>< / div> < div style =order：2; class =Rtable-cell>有一个名为Ice的剑< / div> < div style =order：3; class =Rtable-cell>没有可怕的< / div> < div style =order：4; class =Rtable-cell>男性< / div> < div style =order：5; class =Rtable-cell>< strong> Winterfell之王< / strong>< / div> < div style =order：1; class =Rtable-cell>< h3> Jon Snow< / h3>< / div> < div style =order：2; class =Rtable-cell>有一个名为Longclaw的剑< / div> < div style =order：3; class =Rtable-cell> Direwolf：Ghost< / div> < div style =order：4; class =Rtable-cell>男性< / div> < div style =order：5; class =Rtable-cell>< strong>不知道任何内容< / strong>< / div> < div style =order：1; class =Rtable-cell>< h3> Arya Stark< / h3>< / div> < div style =order：2; class =Rtable-cell>有一个名为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>没有人< / strong>< / div>< / div>  > 
解决方案
理想情况下，所需的选择器将定位 style 属性。类似这样的东西：
  .Rtable> div [style * =order] [style * = {even}] {...} 
  
基本上，这个幻想选择器说：使用包含（ * ）值order的样式属性定位所有div， 
。
 
 
 
可以简化为：
  .Rtable> div [style * = {even}] {...} 
  
但这种CSS魔法根据我的知识。 （ CSS选择器3完整列表）
 
 
 
 选择器4 提供了增强的  ：nth-​​child（）  pseudo类，其能够实现这种斑马条纹。 
 
 
 
现在，我会说最简单的CSS方法来实现你的目标... 
 
 
我在下面的响应式flexbox表中寻找最简单的斑马纹行。
 
 
 ...将向每个具有 order 值的元素添加类。 
 
 
 
稍微调整您的媒体查询后，斑马条纹可以在不同的屏幕尺寸上工作。
 
 
 
 div class =snippetdata-lang =jsdata-hide =false> 
 
  .Rtable {display：flex; flex-wrap：wrap;}。Rtable-cell {box-sizing：border-box; flex：33.33％; margin：-1px 0 0 -1px; padding：5px 10px; border：solid 1px slategrey;} h3 {margin：0; } / * NEW * /。stripe {background-color：black; color：white;} / * ADJUSTED * / @ media all和（max-width：500px）{.Rtable {display：block; } .stripe {background-color：white;颜色：黑色; } .Rtable-cell：nth-​​child（even）{background-color：black; color：white;}}  
 
 < div class = Rtable> < div style =order：1; class =Rtable-cell>< h3> Eddard Stark< / h3>< / div> < div style =order：2; class =Rtable-cell stripe>有一个名为Ice的剑< / div>  < div style =order：3; class =Rtable-cell>没有可怕的< / div> < div style =order：4; class =Rtable-cell stripe>男性< / div> < div style =order：5; class =Rtable-cell>< strong> Winterfell之王< / strong>< / div> < div style =order：1; class =Rtable-cell>< h3> Jon Snow< / h3>< / div> < div style =order：2; class =Rtable-cell stripe>有一个名为Longclaw的剑< / div> < div style =order：3; class =Rtable-cell> Direwolf：Ghost< / div> < div style =order：4; class =Rtable-cell stripe>男性< / div> < div style =order：5; class =Rtable-cell>< strong>不知道任何内容< / strong>< / div> < div style =order：1; class =Rtable-cell>< h3> Arya Stark< / h3>< / div> < div style =order：2; class =Rtable-cell stripe>有一个名为Needle< / div> < div style =order：3; class =Rtable-cell> Direwolf：Nymeria< / div> < div style =order：4; class =Rtable-cell stripe>女性< / div> < div style =order：5; class =Rtable-cell>< strong>没有人< / strong>< / div>< / div>  > 
 
 
 
   JSFIDDLE DEMO   
 
I am looking for the simplest way to zebra stripe the rows on the following responsive flexbox table.

In other words, rows 2 and 4 in this example, but unlimited, I can't know how many rows there will be because this is for a reusable component in a CMS system.

The HTML cannot change but the number of rows and columns will change often. I am happy with setting a limit on columns but not rows.

Is there any way to do it in pure CSS?



.Rtable {
  display: flex;
  flex-wrap: wrap;
}

.Rtable-cell {
  box-sizing: border-box;
  flex: 33.33%;
  margin: -1px 0 0 -1px;
  padding: 5px 10px;
  border: solid 1px slategrey;
}

h3 { margin: 0; }

@media all and (max-width: 500px) {
  .Rtable {
    display: block;
  }
}

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



解决方案
Ideally, the selector you want would target the even values contained in the style attribute. Something like this:
.Rtable > div[style*="order"][style*={even}] { ... }
Basically, this fantasy selector says: target all divs with a style attribute that contains (*) the values "order" and an even number.

It could be simplified to just:
.Rtable > div[style*={even}] { ... }
But this sort of CSS magic doesn't exist, to my knowledge. (CSS Selectors 3 complete list)

Selectors 4 offers an enhanced :nth-child() pseudo-class, which may be able to accomplish such zebra striping. But this isn't ready for prime time.

For now, I would say the simplest CSS method for accomplishing your goal...

  
I am looking for the simplest way to zebra stripe rows in the following responsive flexbox table.
... would be to add a class to each element with an even order value. 

And with a slight adjustment to your media query, the zebra striping works on different screen sizes.



.Rtable {
  display: flex;
  flex-wrap: wrap;
}

.Rtable-cell {
  box-sizing: border-box;
  flex: 33.33%;
  margin: -1px 0 0 -1px;
  padding: 5px 10px;
  border: solid 1px slategrey;
}

h3 { margin: 0; }

/* NEW */
.stripe { 
  background-color: black;
  color: white;
}

/* ADJUSTED */
@media all and (max-width: 500px) {
  .Rtable {  display: block; }
  .stripe { background-color: white; color: black; }
  .Rtable-cell:nth-child(even) { background-color: black; color: white;}
}

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





JSFIDDLE DEMO

                        
这篇关于Zebra条带化包含项目的flexbox表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！