Incorporate a green background and utilize the nth-of-type
selector to specifically style the background of even
rows in red. Alternatively, you can use odd
to achieve the inverse effect.
.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>
Check out the updated sandbox
https://codesandbox.io/s/bu45o?fontsize=14