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

Question

我在 react 中使用 react 表。我从这里学习 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

Answer 1

将背景设置为绿色，然后使用 nth-of-type 选择器，您可以定位 even 行并将其背景设置为红色。您也可以使用 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