CSS表中第一行和第一列的每个单元格的背景颜色不同

我正在尝试为表格的第一行和第一列的每个单元格添加不同的背景颜色.

它应该是这样的:

我找到了一个选择器,可以为第一行的细胞应用不同的颜色,但现在我被第一列的细胞(早晨,下午和晚上)所困.我设法将它们全部变成蓝色,但每个都应该有不同的蓝色......).这是我的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代码:

August 4
August 5
August 6
August 7
August 8




Morning
Day 1 Morning
Day 2 Morning
Day 3 Morning
Day 4 Morning
Day 5 Morning


Afternoon
Day 1 Afternoon
Day 2 Afternoon
Day 3 Afternoon
Day 4 Afternoon
Day 5 Afternoon


Evening
Day 1 Evening
Day 2 Evening
Day 3 Evening
Day 4 Evening
Day 5 Evening
 

Maximillian .. 7

您可以修改在第一列每个单元的颜色,而不结合修改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;
}

现场演示:

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;
}

  

    

      

      
August 4
      
August 5
      
August 6
      
August 7
      
August 8
    
  
  

    

      
Morning
      
Day 1 Morning
      
Day 2 Morning
      
Day 3 Morning
      
Day 4 Morning
      
Day 5 Morning
    
    

      
Afternoon
      
Day 1 Afternoon
      
Day 2 Afternoon
      
Day 3 Afternoon
      
Day 4 Afternoon
      
Day 5 Afternoon
    
    

      
Evening
      
Day 1 Evening
      
Day 2 Evening
      
Day 3 Evening
      
Day 4 Evening
      
Day 5 Evening
    
  

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

  

    

      

      
August 4
      
August 5
      
August 6
      
August 7
      
August 8
    
  
  

    

      
Morning
      
Day 1 Morning
      
Day 2 Morning
      
Day 3 Morning
      
Day 4 Morning
      
Day 5 Morning
    
    

      
Afternoon
      
Day 1 Afternoon
      
Day 2 Afternoon
      
Day 3 Afternoon
      
Day 4 Afternoon
      
Day 5 Afternoon
    
    

      
Evening
      
Day 1 Evening
      
Day 2 Evening
      
Day 3 Evening
      
Day 4 Evening
      
Day 5 Evening