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

- user5692485

---

你能修改HTML吗？ - VikingBlooded

如果您可以更改HTML，为什么不只添加类呢？ - Sam Jacobs

谢谢你的帮助！Maximilian Laumeister和scaisEdge的代码非常好用，我非常感激！很抱歉回复晚了，这是我第一次在这里发布问题，我以为只要有人回答就会收到电子邮件通知... - user5692485

Answer 1

您可以通过将tr上的nth-child与td上的first-child结合使用来修改第一列中每个单元格的颜色，而无需修改HTML代码，如下所示：

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

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

（说明：此链接为JSFiddle网站上的一个示例代码页面）

- Maximillian Laumeister

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

- ScaisEdge

---

很棒+1，只需要这样修正：tr:nth-child(1) td:first-child 和 tr:nth-child(2) td:first-child 和 tr:nth-child(3) td:first-child。请参考链接：https://jsfiddle.net/Mi_Creativity/dLhbe9da/ - Mi-Creativity

欢迎，但是tr:nth-child的顺序仍然不对，需要改为1、2和3。 - Mi-Creativity

当第二个tr开始时，第一个tr是白色的。 - ScaisEdge

你是对的，但 OP 表中的第一行是 <tr><th>.. 而不是 <tr><td>..。 - Mi-Creativity

但是我认为 tr 的编号仍然保持不变，与 td 子元素无关。 - ScaisEdge

@scaisEdge 我们想要样式化的 tr 是它们父元素 tbody 的第一、二、三个子元素。使用这种选择器，th 标签完全不涉及。 - Maximillian Laumeister