Изменение цвета отдельной ячейки в таблице - PullRequest
Новая
       60

Изменение цвета отдельной ячейки в таблице

0 голосов
/ 20 марта 2020

Есть ли способ изменить цвет отдельной ячейки в таблице? Я хочу создать клетчатый узор в таблице так, чтобы у каждой четной ячейки был свой цвет, а у каждого четного столбца - разный.

Мне удалось изменить только цвет всех ячеек в строке: 

tr:nth-child(even) {
  background-color: #FA8072;
}

Но не уверен, как я мог бы применить его, чтобы получить такой результат:

enter image description here

Здесь вы можете увидеть мою попытку в codepen:

Codepen

1 Ответ

1 голос
/ 20 марта 2020

вам нужно выбрать нечетное и четное tr, а также td:

пример: 

td {
  background: linear-gradient(to bottom left, lightgreen, lightgreen, rgba(255, 255, 255, 0.2), lightgreen, lightgreen) lightgreen;
}

tr:nth-child(even) td:nth-child(even),
tr:nth-child(odd) td:nth-child(odd) {
  background: linear-gradient(to bottom left, #FA8072, #FA8072, rgba(255, 255, 255, 0.2), #FA8072, #FA8072) #FA8072;
}
<div id="q-app">
  <div class="q-pa-md">
    <div class="q-table__container q-table--horizontal-separator column no-wrap q-table__card q-table--no-wrap">
      <div class="q-table__middle scroll">
        <table class="q-table">
          <thead>
            <tr>
              <th class="text-left bg-primary text-white bg-primary text-white">Confusion Matrix</th>
              <th class="text-center">Actual 1</th>
              <th class="text-center">Actual 0</th>
            </tr>
          </thead>
          <tbody>
            <tr class="">
              <th class="text-left bg-grey-2 ellipsis" style="max-width: 50px;">Predicted 1</th>
              <td class="text-center">2</td>
              <td class="text-center">2</td>
            </tr>
            <tr class="">
              <th class="text-left bg-grey-2 ellipsis" style="max-width: 50px;">Predicted 0</th>
              <td class="text-center">23</td>
              <td class="text-center">12</td>
            </tr>
              <tr class="">
              <th class="text-left bg-grey-2 ellipsis" style="max-width: 50px;">Predicted 1</th>
              <td class="text-center">2</td>
              <td class="text-center">2</td>
            </tr>
            <tr class="">
              <th class="text-left bg-grey-2 ellipsis" style="max-width: 50px;">Predicted 0</th>
              <td class="text-center">23</td>
              <td class="text-center">12</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
...