表中单细胞颜色的变化

Question

有办法改变表格中单细胞的颜色吗？我想在表格中创建格型，这样每个偶数单元格都有不同的颜色，而每个偶数列都有不同的颜色。

我只更改了一行中所有单元格的颜色：

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

但我不确定如何应用它来获得这样的结果：

​

​

在这里，您可以看到我在代码方面的尝试：

科德芬

Answer 1

您需要选择奇数和偶数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>

​