CSS Grid中的表格条纹行

Question

CSS Grid中的表格条纹行

13

我试图用 CSS Grid 布局替换在 Bootstrap 中设置的数据网格和交互组件。我已经成功地复制了网格，但是在让类似表格分隔线起作用方面遇到了困难。根据我对 CSS Grid 的理解，由于我知道要提前显示的列数，但不知道行数（服务器动态生成数据），因此需要使用grid-template-columns: repeat(3, auto); ，并且每个单元格必须是包装 div 的直接子元素。

我尝试使用 nth-child 来获得想要的效果，但无法弄清楚哪个选择器可以让我针对动态范围的元素进行定位。

当事先不知道行数时，是否有更好的方法使用 CSS Grid 布置网格布局？

这里是一个fiddle示例，其中包括下面的所有代码。在我的实际项目中，行是动态生成的，目前有 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>

- Cass

你想要什么效果？哪些列或行应该被条纹化？ - Michael Benjamin

抱歉 - 头部行需要不同的样式，我可以使用特定元素上的类来实现。然后从顶部开始的每个第二行（标题后的第一行）都应该有一个背景颜色。 - Cass

2个回答

15

现在，您还可以使用具有display:contents属性的元素来包含单元格（我已经按行或列“分组”它们），并以此方式对单元格应用样式。

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

- Michael Whitman

4

这应该是被接受的答案。感谢您让我发现了 display: contents。 - Martial

1

截至2022年11月，display: contents在所有浏览器中都存在一些严重的限制。例如，在Chrome（及相关的Edge）和Firefox中，当通过display: contents进行渲染时，按钮是无法访问的。 https://caniuse.com/css-display-contents - pete otaqui

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

使用选择器来选择一列中的每隔一行。

对于其他列，只需进行调整和重复即可。

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