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

Question

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

我想显示我的行交替颜色 "red" 和 "green" 在我们在 react table?[=15= 中显示的每个 cell.can 上都有黑色边框]

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

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

how to show alternate red and green color of row?

css

reactjs

react-table