如何显示行的交替红色和绿色？

Question

如何显示行的交替红色和绿色？

5

我正在使用React中的`react-table`。我从这里https://github.com/tannerlinsley/react-table/tree/v6#codesandbox-examples和这里https://www.npmjs.com/package/react-table学习。

我想展示我的行以交替的颜色“红色”和“绿色”显示，并在每个单元格上有黑色边框。我们可以在React表格中展示吗？

以下是我的代码：https://codesandbox.io/s/ecstatic-banzai-zp54o 如下图所示：

- user944513

1个回答

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

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

- Pixelomo · Accepted Answer

将背景设置为绿色，然后使用 nth-of-type 选择器可以选择偶数行，并样式设置它们的背景为红色。你也可以使用 odd 来反过来实现。

.rt-tr-group{
  background: green;
}
.rt-tr-group:nth-of-type(even){
  background: red;
}

<div class="rt-tbody" style="min-width: 200px;"><div class="rt-tr-group" role="rowgroup"><div class="rt-tr -odd" role="row"><div class="rt-td" role="gridcell" style="flex: 100 0 auto; width: 100px;">naveen</div><div class="rt-td" role="gridcell" style="flex: 100 0 auto; width: 100px;"><div><span class="number">14</span><br><span class="number">jgjg</span></div></div></div></div><div class="rt-tr-group" role="rowgroup"><div class="rt-tr -even" role="row"><div class="rt-td" role="gridcell" style="flex: 100 0 auto; width: 100px;">test</div><div class="rt-td" role="gridcell" style="flex: 100 0 auto; width: 100px;"><div><span class="number">18</span><br><span class="number">jggkhkg</span></div></div></div></div><div class="rt-tr-group" role="rowgroup"><div class="rt-tr -odd" role="row"><div class="rt-td" role="gridcell" style="flex: 100 0 auto; width: 100px;">naveen</div><div class="rt-td" role="gridcell" style="flex: 100 0 auto; width: 100px;"><div><span class="number">14</span><br><span class="number">jgjg</span></div></div></div></div><div class="rt-tr-group" role="rowgroup"><div class="rt-tr -even" role="row"><div class="rt-td" role="gridcell" style="flex: 100 0 auto; width: 100px;">test</div><div class="rt-td" role="gridcell" style="flex: 100 0 auto; width: 100px;"><div><span class="number">18</span><br><span class="number">jggkhkg</span></div></div></div></div></div>

更新沙盒 https://codesandbox.io/s/bu45o?fontsize=14