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

Question

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

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

这是我的代码 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