как показать чередование красного и зеленого цвета строки?

Я использую 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

введите здесь описание изображения


reactjs css react-table
person user944513    schedule 01.06.2019    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Установите для фона зеленый цвет, затем с помощью селектора 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

person Pixelomo    schedule 01.06.2019
comment
спасибо за ответ ... смотри мое обновление .. я хочу это - person user944513; 01.06.2019
comment
задняя граница должна быть между ячейкой - person user944513; 01.06.2019
comment
Я ответил на ваш вопрос, базовый стиль есть, если вы хотите получить определенный стиль границы, который является вашей работой, StackOverflow не является службой написания кода - person Pixelomo; 01.06.2019