斑马条纹带包装项目的 flexbox 表 [英] Zebra striping a flexbox table with wrapping items
问题描述
我正在寻找最简单的方法来对以下响应式 flexbox 表上的行进行斑马条纹.
换句话说，本例中的第 2 行和第 4 行，但没有限制，我不知道会有多少行，因为这是用于 CMS 系统中的可重用组件.
HTML 无法更改，但行数和列数会经常更改.我很高兴为列而不是行设置限制.
有没有办法在纯 CSS 中做到这一点?
.Rtable {显示:弹性；flex-wrap: 包裹;}.Rtable-cell {box-sizing: 边框框；弹性:33.33%；边距:-1px 0 0 -1px;填充:5px 10px；边框:实心 1px slategrey；}h3 { 边距:0;}@media all 和(最大宽度:500px){.Rtable {显示:块；}}<div style="order:1;"class="Rtable-cell"><h3>Eddard Stark</h3></div><div style="order:2;"class="Rtable-cell">有一把名为冰的剑</div><div style="order:3;"class="Rtable-cell">没有 direwolf</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>Jon Snow</h3></div><div style="order:2;"class="Rtable-cell">有一把名为长爪的剑</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 style="order:4;"class="Rtable-cell">女性</div><div style="order:5;"class="Rtable-cell"><strong>没有人</strong></div>
理想情况下，您想要的选择器将针对 style 属性中包含的偶数值.像这样:
.Rtable >div[style*="order"][style*={even}] { ... }基本上，这个幻想选择器说:定位所有具有包含(*)值order"和偶数的样式属性的div.
可以简化为:
.Rtable >div[style*={even}] { ... }但据我所知，这种 CSS 魔法并不存在.(CSS 选择器 3 完整列表)
Selectors 4 提供了增强的 :nth-child() 伪类，这可能能够完成这样的斑马条纹.但这还没有准备好迎接黄金时段.
就目前而言，我会说实现您的目标的最简单的 CSS 方法...
<块引用>我正在寻找在以下响应式 flexbox 表中斑马条纹行的最简单方法.
... 将为每个具有偶数order 值的元素添加一个类.
对您的媒体查询稍作调整，斑马条纹适用于不同的屏幕尺寸.
.Rtable {显示:弹性；flex-wrap: 包裹;}.Rtable-cell {box-sizing: 边框框；弹性:33.33%；边距:-1px 0 0 -1px;填充:5px 10px；边框:实心 1px slategrey；}h3 { 边距:0;}/* 新的 */.条纹 {背景颜色:黑色；白颜色;}/* 调整 */@media all 和(最大宽度:500px){.rtable { 显示:块；}.stripe { 背景色:白色；颜色:黑色;}.Rtable-cell:nth-child(even) { background-color: black;白颜色;}}<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">没有 direwolf</div><div style="order:4;"class="Rtable-cell stripe">Male</div><div style="order:5;"class="Rtable-cell"><strong>临冬城领主</strong></div><div style="order:1;"class="Rtable-cell"><h3>Jon Snow</h3></div><div style="order:2;"class="Rtable-cell stripe">有一把名为长爪的剑</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>什么都不知道</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 style="order:4;"class="Rtable-cell stripe">Female</div><div style="order:5;"class="Rtable-cell"><strong>没有人</strong></div>
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>
这篇关于斑马条纹带包装项目的 flexbox 表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
