css - 如何更改表格 tr 和 td 的背景颜色？

Question

这是我想要得到的结果:

这就是我得到的:

这是我的代码:

.chart-table {
    th, td {
        text-align: center;
        width: 25%;
    }

    tr:nth-child(even) > td  {
        background-color: $softer-beige;
    }

    tr:nth-child(odd) > td {
        background-color: $soft-beige;
    }
}

我做错了什么？

更新

我在这里问的很清楚。如果你不知道答案，你就没有理由对我的问题投反对票。不要成为那种人。

Answer 1

好吧，你实际上需要 3 种颜色，你还需要在 td 上使用 :nth-child。

.chart-table{width:300px;height:300px;}
.chart-table th,
.chart-table td {
  text-align: center;
  width: 25%;
  background-color: #f5f5dc;
}

.chart-table tr:nth-child(even)> td:nth-child(odd),
.chart-table tr:nth-child(odd) > td:nth-child(even){
  background-color: #dcdcc6;
}

/*instersection of darker row and column*/
.chart-table tr:nth-child(even) > td:nth-child(even){
  background-color: #c4c4b0;
}

<table class="chart-table">
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
    <td>1.4</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
    <td>2.4</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
    <td>3.4</td>
  </tr>
  <tr>
    <td>4.1</td>
    <td>4.2</td>
    <td>4.3</td>
    <td>4.4</td>
  </tr>
  <tr>
    <td>5.1</td>
    <td>5.2</td>
    <td>5.3</td>
    <td>5.4</td>
  </tr>
  <tr>
    <td>6.1</td>
    <td>6.2</td>
    <td>6.3</td>
    <td>6.4</td>
  </tr>
</table>