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

Posted

技术标签:

【中文标题】CSS表格中第一行和第一列的每个单元格的不同背景颜色【英文标题】:Different background-color for each cell of the first row and first column in a CSS table 【发布时间】:2016-03-24 10:36:24 【问题描述】:

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

它应该是这样的:

我找到了一个选择器,可以为第一行的单元格应用不同的颜色,但现在我被第一列的单元格困住了(早上、下午和晚上)。我设法让它们全部变成蓝色,但实际上它们每个都应该有不同的蓝色阴影......)。这是我的 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>

【问题讨论】:

你能改变html吗? 如果你可以改变html,你为什么不添加类? 感谢您的帮助! Maximilian Laumeister 和 scaisEdge 的代码就像一个魅力,我非常感激!抱歉回复晚了,我第一次在这里发布问题,我以为一旦有人发布答案我会收到电子邮件通知.... 【参考方案1】:

您可以通过组合tr 上的nth-childtd 上的first-child 来修改第一列中每个单元格的颜色,如下所示:

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/

【讨论】:

【参考方案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;

【讨论】:

不错的 +1,只需像这样更正它:tr:nth-child(1) td:first-childtr:nth-child(2) td:first-childtr:nth-child(3) td:first-child jsfiddle.net/Mi_Creativity/dLhbe9da 欢迎您,但tr:nth-child 的序列仍然发生变化,需要改为 1,2 和 3 没有第一个 tr 从第二个开始时是白色的 你是对的,但 OP 表中的第一行是 &lt;tr&gt;&lt;th&gt;.. 而不是 &lt;tr&gt;&lt;td&gt;.. 但我认为 tr 编号保持不变,与 td 孩子无关

以上是关于CSS表格中第一行和第一列的每个单元格的不同背景颜色的主要内容,如果未能解决你的问题,请参考以下文章

PyQt5 QTableWidget 仅显示第一行和第一列

给定一个包含多个列的手动表格,每个列都使用不同的渲染器,如何在数据更新时更改单个单元格的背景颜色?

滚动时如何锁定表格的第一行和第一列,可能使用 JavaScript 和 CSS?

【小工具】python 携手R 计算两组数据相关性

R语言中怎么把第一列的数据作为行名

python的openpyxl库怎么读取一行或者一列