我正在使用具有交替行颜色的表格.
tr.d0 td {
background-color: #CC9999;
color: black;
}
tr.d1 td {
background-color: #9999CC;
color: black;
}<table>
<tr class="d0">
<td>One</td>
<td>one</td>
</tr>
<tr class="d1">
<td>Two</td>
<td>two</td>
</tr>
</table>这里我使用的是类tr,但我只想用于table.当我使用表格比这个适用于tr替代.
我可以使用CSS编写这样的HTML吗？
<table class="alternate_color">
<tr><td>One</td><td>one</td></tr>
<tr><td>Two</td><td>two</td></tr>
</table>
如何使用CSS使行具有"斑马条纹"？
我正在寻找最简单的方法来斑马条纹下面的响应式flexbox表上的行.
换句话说,在这个例子中,第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 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 …