Различные цвета фона для каждой ячейки первой строки и первого столбца в таблице CSS

Question

Я пытаюсь добавить другой цвет фона в каждую ячейку первой строки и первого столбца таблицы.

Это то, что он должен выглядеть следующим образом:

Я нашел селектор, чтобы применить разные цвета ячеек первой строки, но теперь я застрял с ячеек первого столбца (Утро, День и Вечер). Мне удалось получить все синие, но у каждого из них должен быть другой оттенок синего ...). Это мой CSS код:

table.agenda { 
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
border-collapse: collapse; 
width: 100%;} 

table.agenda td, table.agenda th { 
border: 1px solid #fff; 
padding: 8px; 
text-align: center;} 

table.agenda td { 
padding-top: 12px; 
padding-bottom: 12px; 
background-color: rgb(193, 212, 174); 
color: black;} 

th:nth-child(1) { background: white; } 
th:nth-child(2) { background: rgb(72, 151, 54); color: white;} 
th:nth-child(3) { background: rgb(84, 155, 64); color: white;} 
th:nth-child(4) { background: rgb(97, 160, 73); color: white;} 
th:nth-child(5) { background: rgb(110, 165, 82); color: white;} 
th:nth-child(6) { background: rgb(120, 169, 91); color: white;} 

table.agenda tr td:first-child { background: rgb(16, 69, 142); color: white;} 

и это мой HTML код:

<table class="agenda"> 
<thead> 
<tr> 
<th></th> 
<th>August 4</th> 
<th>August 5</th> 
<th>August 6</th> 
<th>August 7</th> 
<th>August 8</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Morning</td> 
<td>Day 1 Morning</td> 
<td>Day 2 Morning</td> 
<td>Day 3 Morning</td> 
<td>Day 4 Morning</td> 
<td>Day 5 Morning</td> 
</tr> 
<tr> 
<td>Afternoon</td> 
<td>Day 1 Afternoon</td> 
<td>Day 2 Afternoon</td> 
<td>Day 3 Afternoon</td> 
<td>Day 4 Afternoon</td> 
<td>Day 5 Afternoon</td> 
</tr> 
<tr> 
<td>Evening</td> 
<td>Day 1 Evening</td> 
<td>Day 2 Evening</td> 
<td>Day 3 Evening</td> 
<td>Day 4 Evening</td> 
<td>Day 5 Evening</td> 
</tr> 
</tbody> 
</table> 

Answer 1

Вы можете изменить цвет каждой ячейки в первом столбце без изменения HTML путем объединения nth-child на tr и first-child на td, как это:

table.agenda tr:nth-child(1) td:first-child { 
    background: rgb(16, 20, 50); 
    color: white; 
} 

table.agenda tr:nth-child(2) td:first-child { 
    background: rgb(16, 69, 150); 
    color: white; 
} 

table.agenda tr:nth-child(3) td:first-child { 
    background: rgb(16, 69, 255); 
    color: white; 
} 

Рабочая Live Demo:

table.agenda { 
 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
table.agenda td, 
 
table.agenda th { 
 
    border: 1px solid #fff; 
 
    padding: 8px; 
 
    text-align: center; 
 
} 
 

 
table.agenda td { 
 
    padding-top: 12px; 
 
    padding-bottom: 12px; 
 
    background-color: rgb(193, 212, 174); 
 
    color: black; 
 
} 
 

 
th:nth-child(1) { 
 
    background: white; 
 
} 
 

 
th:nth-child(2) { 
 
    background: rgb(72, 151, 54); 
 
    color: white; 
 
} 
 

 
th:nth-child(3) { 
 
    background: rgb(84, 155, 64); 
 
    color: white; 
 
} 
 

 
th:nth-child(4) { 
 
    background: rgb(97, 160, 73); 
 
    color: white; 
 
} 
 

 
th:nth-child(5) { 
 
    background: rgb(110, 165, 82); 
 
    color: white; 
 
} 
 

 
th:nth-child(6) { 
 
    background: rgb(120, 169, 91); 
 
    color: white; 
 
} 
 

 
table.agenda tr:nth-child(1) td:first-child { 
 
    background: rgb(16, 20, 50); 
 
    color: white; 
 
} 
 

 
table.agenda tr:nth-child(2) td:first-child { 
 
    background: rgb(16, 69, 150); 
 
    color: white; 
 
} 
 

 
table.agenda tr:nth-child(3) td:first-child { 
 
    background: rgb(16, 69, 255); 
 
    color: white; 
 
}

<table class="agenda"> 
 
    <thead> 
 
    <tr> 
 
     <th></th> 
 
     <th>August 4</th> 
 
     <th>August 5</th> 
 
     <th>August 6</th> 
 
     <th>August 7</th> 
 
     <th>August 8</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Morning</td> 
 
     <td>Day 1 Morning</td> 
 
     <td>Day 2 Morning</td> 
 
     <td>Day 3 Morning</td> 
 
     <td>Day 4 Morning</td> 
 
     <td>Day 5 Morning</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Afternoon</td> 
 
     <td>Day 1 Afternoon</td> 
 
     <td>Day 2 Afternoon</td> 
 
     <td>Day 3 Afternoon</td> 
 
     <td>Day 4 Afternoon</td> 
 
     <td>Day 5 Afternoon</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Evening</td> 
 
     <td>Day 1 Evening</td> 
 
     <td>Day 2 Evening</td> 
 
     <td>Day 3 Evening</td> 
 
     <td>Day 4 Evening</td> 
 
     <td>Day 5 Evening</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

JSFiddle Версия: https://jsfiddle.net/wyh11L66/1/

Answer 2

для строки, вы можете использовать этот (вы должны настроить цвет, я скопировал свой цвет заголовка)

tr:nth-child(1) td:first-child { background: rgb(72, 151, 54); color: white;} 
tr:nth-child(2) td:first-child { background: rgb(72, 151, 54); color: white;} 
tr:nth-child(3) td:first-child { background: rgb(72, 151, 54); color: white;}