时间戳

首页 > 解决方案 > 更改表格中单个单元格的颜色

html - 更改表格中单个单元格的颜色

问题描述

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

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

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

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

在此处输入图像描述

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

密码笔

标签： htmlcssquasar-framework

解决方案

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

推荐阅读