如何更改表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种颜色，你也需要在:nth-child上使用td。

.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>