如何更改表格的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; 
    } 
} 

什麼我做錯了嗎？

UPDATE

我的要求在這裏是非常明確的。 如果你不知道答案，你沒有爲什麼要降低我的問題。不要成爲那種人。

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>