更改 Table 中单个单元格的颜色

Question

有没有办法改变table中单个单元格的颜色？我想在 table 中创建方格图案，这样每个偶数单元格都有不同的颜色，每个偶数列都有不同的颜色。

我只成功地改变了一行中所有单元格的颜色：

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

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

在这里你可以看到我在codepen中的尝试：

Codepen

Answer 1

你需要 select 奇数和偶数 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>

更改 Table 中单个单元格的颜色

Changing color of single cell in Table

html

css

quasar-framework