在CSS网格中对表格进行条带分割 [英] Table striping rows in CSS Grid

问题描述

我试图更换一个数据网格，互动组件，这些组件已经在Bootstrap中使用CSS基于Grid的布局进行设置。

我能够复制网格，但无法获得表格分条等工作。从我对CSS网格的了解，因为我知道列的数量将提前显示，但不是行数（从服务器动态生成的数据），我需要使用 grid-template-columns：repeat（3，auto）; ，并且每个单元格必须是包装div的直接子元素。

我试过使用nth-child来获得我想要的效果，但无法弄清楚选择器会让我定位一个动态范围的元素。

有没有更好的方式在行数未知时提前使用CSS Grid来设置网格布局？

下面是小提琴与我迄今为止，其中包括以下所有代码。在我的真实项目中，行是动态生成的，现在有5列 - 尽管未来可能会改变。

  .grid-table {display：grid;显示：-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>房间名称< / span> < span>开始日期< / span> < span>结束日期< / span> < span> 100室< / span> <跨度>星期二< /跨度> <跨度>星期三< /跨度> < span> 200室< / span> <跨度>星期二< /跨度> <跨度>周五< /跨度> < span> 200室< / span> <跨度>星期二< /跨度> <跨度>周五< /跨度> < span> 200室< / span> <跨度>星期二< /跨度> < span>星期五< / span>< / div>

对于其他列，只需调整并重复。

使用一个选择器来定位每列中的其他行。 >

.grid-table {display：grid; grid-template-columns：repeat（3，auto）;}。grid-table> span：n-child（-n + 3）{background-color：red;}。grid-table>跨度：第n个孩子（6n + 4），网格表>跨度：第n个孩子（6n + 5），网格表> span：nn-child（6n + 6）{background-color：lightgreen;}

 < div class =grid-table> < span>房间名称< / span> < span>开始日期< / span> < span>结束日期< / span> < span> 100室< / span> <跨度>星期二< /跨度> <跨度>星期三< /跨度> < span> 200室< / span> <跨度>星期二< /跨度> <跨度>周五< /跨度> < span> 200室< / span> <跨度>星期二< /跨度> <跨度>周五< /跨度> < span> 200室< / span> <跨度>星期二< /跨度> <跨度>周五< /跨度> < span>房间名称< / span> < span>开始日期< / span> < span>结束日期< / span> < span> 100室< / span> <跨度>星期二< /跨度> <跨度>星期三< /跨度> < span> 200室< / span> <跨度>星期二< /跨度> <跨度>周五< /跨度> < span> 200室< / span> <跨度>星期二< /跨度> <跨度>周五< /跨度> < span> 200室< / span> <跨度>星期二< /跨度> < span>星期五< / span>< / div>  

I'm trying to replace a grid of data & interactive components that had been set up in Bootstrap with a CSS Grid-based layout.

I was able to replicate the grid, but am having trouble getting something like table striping working.From what I understand of CSS Grid, since I know the number of columns that will be displayed ahead of time but not the number of rows (dynamically generated data from the server), I need to use grid-template-columns: repeat(3, auto);, and each cell must be a direct child of the wrapper div.

I've tried using nth-child to get the effect I want, but can't figure out what selector would let me target a dynamic range of elements.

Is there a better way to set up a grid layout using CSS Grid when the number of rows is unknown ahead of time?

Here's a fiddle with what I have so far, which includes all the code below. In my real project, the rows are dynamically generated and there are 5 columns right now- though that may change in the future.

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

解决方案

Use a selector that targets every other row in one column.

For other columns, simply adjust and repeat.

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

这篇关于在CSS网格中对表格进行条带分割的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！