Table 条带化 CSS 网格中的行
Table striping rows in CSS Grid
我正在尝试用 CSS 基于网格的布局替换在 Bootstrap 中设置的数据网格和交互式组件。
我能够复制网格,但是我无法像 table 条带化 working.From 我对 CSS 网格的理解,因为我知道列数将提前显示但不显示行数(从服务器动态生成的数据),我需要使用 grid-template-columns: repeat(3, auto);
,并且每个单元格必须是包装器 div 的直接子级。
我试过使用 nth-child 来获得我想要的效果,但无法弄清楚哪个选择器可以让我定位动态范围的元素。
当行数提前未知时,是否有更好的方法使用 CSS 网格设置网格布局?
这是 fiddle with what I have so far, which includes all the code below。在我的真实项目中,行是动态生成的,现在有 5 列——尽管将来可能会改变。
.grid-table {
display: grid;
display: -ms-grid;
grid-template-columns: repeat(3, auto);
-ms-grid-template-columns: repeat(3, auto);
}
.grid-table :nth-child(-n+3) {
background-color: red;
}
<div class="grid-table">
<span>Room Name</span>
<span>Start Date</span>
<span>End Date</span>
<span>Room 100</span>
<span>Tuesday</span>
<span>Wednesday</span>
<span>Room 200</span>
<span>Tuesday</span>
<span>Friday</span>
<span>Room 200</span>
<span>Tuesday</span>
<span>Friday</span>
<span>Room 200</span>
<span>Tuesday</span>
<span>Friday</span>
</div>
使用以一列中的每隔一行为目标的选择器。
对于其他列,只需调整并重复即可。
.grid-table {
display: grid;
grid-template-columns: repeat(3, auto);
}
.grid-table > span:nth-child(-n+3) {
background-color: red;
}
.grid-table > span:nth-child(6n+4),
.grid-table > span:nth-child(6n+5),
.grid-table > span:nth-child(6n+6) {
background-color: lightgreen;
}
<div class="grid-table">
<span>Room Name</span>
<span>Start Date</span>
<span>End Date</span>
<span>Room 100</span>
<span>Tuesday</span>
<span>Wednesday</span>
<span>Room 200</span>
<span>Tuesday</span>
<span>Friday</span>
<span>Room 200</span>
<span>Tuesday</span>
<span>Friday</span>
<span>Room 200</span>
<span>Tuesday</span>
<span>Friday</span>
<span>Room Name</span>
<span>Start Date</span>
<span>End Date</span>
<span>Room 100</span>
<span>Tuesday</span>
<span>Wednesday</span>
<span>Room 200</span>
<span>Tuesday</span>
<span>Friday</span>
<span>Room 200</span>
<span>Tuesday</span>
<span>Friday</span>
<span>Room 200</span>
<span>Tuesday</span>
<span>Friday</span>
</div>
如今,您还可以使用带有 display:contents 的 an 元素来包含单元格(我已按行或列“分组”它们),并以这种方式将样式应用于单元格。
.r_container {
display:grid;
grid-template-columns: repeat(3, 1fr);
width:200px;
justify-content:center;
align-items:center;
font-family:sans-serif;
}
.r_group {
display:contents;
}
.r_group:nth-of-type(2n) > .cell {
background-color:dimgray;
}
.cell {
justify-content:center;
align-items:center;
text-align:center;
padding-top:0.5rem;
padding-bottom:0.5rem;
}
.header > .cell {
background-color:black;
color:white;
font-weight:500;
}
<h1>Organized by Row</h1>
<div class="r_container">
<div class="r_group header">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
</div>
<div class="r_group">
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
</div>
<div class="r_group">
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
</div>
<div class="r_group">
<div class="cell">10</div>
<div class="cell">11</div>
<div class="cell">12</div>
</div>
</div>
我正在尝试用 CSS 基于网格的布局替换在 Bootstrap 中设置的数据网格和交互式组件。
我能够复制网格,但是我无法像 table 条带化 working.From 我对 CSS 网格的理解,因为我知道列数将提前显示但不显示行数(从服务器动态生成的数据),我需要使用 grid-template-columns: repeat(3, auto);
,并且每个单元格必须是包装器 div 的直接子级。
我试过使用 nth-child 来获得我想要的效果,但无法弄清楚哪个选择器可以让我定位动态范围的元素。
当行数提前未知时,是否有更好的方法使用 CSS 网格设置网格布局?
这是 fiddle with what I have so far, which includes all the code below。在我的真实项目中,行是动态生成的,现在有 5 列——尽管将来可能会改变。
.grid-table {
display: grid;
display: -ms-grid;
grid-template-columns: repeat(3, auto);
-ms-grid-template-columns: repeat(3, auto);
}
.grid-table :nth-child(-n+3) {
background-color: red;
}
<div class="grid-table">
<span>Room Name</span>
<span>Start Date</span>
<span>End Date</span>
<span>Room 100</span>
<span>Tuesday</span>
<span>Wednesday</span>
<span>Room 200</span>
<span>Tuesday</span>
<span>Friday</span>
<span>Room 200</span>
<span>Tuesday</span>
<span>Friday</span>
<span>Room 200</span>
<span>Tuesday</span>
<span>Friday</span>
</div>
使用以一列中的每隔一行为目标的选择器。
对于其他列,只需调整并重复即可。
.grid-table {
display: grid;
grid-template-columns: repeat(3, auto);
}
.grid-table > span:nth-child(-n+3) {
background-color: red;
}
.grid-table > span:nth-child(6n+4),
.grid-table > span:nth-child(6n+5),
.grid-table > span:nth-child(6n+6) {
background-color: lightgreen;
}
<div class="grid-table">
<span>Room Name</span>
<span>Start Date</span>
<span>End Date</span>
<span>Room 100</span>
<span>Tuesday</span>
<span>Wednesday</span>
<span>Room 200</span>
<span>Tuesday</span>
<span>Friday</span>
<span>Room 200</span>
<span>Tuesday</span>
<span>Friday</span>
<span>Room 200</span>
<span>Tuesday</span>
<span>Friday</span>
<span>Room Name</span>
<span>Start Date</span>
<span>End Date</span>
<span>Room 100</span>
<span>Tuesday</span>
<span>Wednesday</span>
<span>Room 200</span>
<span>Tuesday</span>
<span>Friday</span>
<span>Room 200</span>
<span>Tuesday</span>
<span>Friday</span>
<span>Room 200</span>
<span>Tuesday</span>
<span>Friday</span>
</div>
如今,您还可以使用带有 display:contents 的 an 元素来包含单元格(我已按行或列“分组”它们),并以这种方式将样式应用于单元格。
.r_container {
display:grid;
grid-template-columns: repeat(3, 1fr);
width:200px;
justify-content:center;
align-items:center;
font-family:sans-serif;
}
.r_group {
display:contents;
}
.r_group:nth-of-type(2n) > .cell {
background-color:dimgray;
}
.cell {
justify-content:center;
align-items:center;
text-align:center;
padding-top:0.5rem;
padding-bottom:0.5rem;
}
.header > .cell {
background-color:black;
color:white;
font-weight:500;
}
<h1>Organized by Row</h1>
<div class="r_container">
<div class="r_group header">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
</div>
<div class="r_group">
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
</div>
<div class="r_group">
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
</div>
<div class="r_group">
<div class="cell">10</div>
<div class="cell">11</div>
<div class="cell">12</div>
</div>
</div>