正在尝试更改表中第一列的背景色

Question

尝试使用power-automation创建表，并在电子邮件正文中为其添加样式。我项目的最后一部分涉及到让表的第一列(名称列(具有橙色背景，但我似乎无法让CSS为此工作。

样式表：

<style>
table{
border: 2px solid #C1C1C1;
background-color: #FFFFFF;
width: 400px;
text-align: center;
border-collapse: collapse;
}
table td, th {
border: 1px solid #555555;
padding: 5px 10px;
}
table tbody td {
font-size: 12px;
font-weight: bold;
color: #000000;
}
table thead {
background: #737373;
}
table thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}
table tr td:nth-child(1)
{
background-color: orange;
}
</style>

PowerBI的HTML表操作的HTML输出：

<table>
<thead>
<tr>
<th></th>
<th>Sunday^10/30/2022</th>
<th>Monday^10/31/2022</th>
<th>Tuesday^11/1/2022</th>
<th>Wednesday^11/2/2022</th>
<th>Thursday^11/3/2022</th>
th>Friday^11/4/2022</th>
<th>Saturday^11/5/2022</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>  <-- this column needs to be orange
<td>Rest Day</td>
<td>Vacation</td>
<td>Vacation</td>
<td>Office</td>
<td>Remote</td>
<td>Office</td>
<td>Rest Day</td>
</tr>
</tbody>
</table>

Answer 1

您可以尝试以下操作：

table {
border: 2px solid #C1C1C1;
background-color: #FFFFFF;
width: 400px;
text-align: center;
border-collapse: collapse;
}
table td,
th {
border: 1px solid #555555;
padding: 5px 10px;
}
table tbody td {
font-size: 12px;
font-weight: bold;
color: #000000;
}
table thead {
background: #737373;
}
table thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}
tbody tr td:first-child  {
background-color: orange;
}

<table>
<thead>
<tr>
<th></th>
<th>Sunday^10/30/2022</th>
<th>Monday^10/31/2022</th>
<th>Tuesday^11/1/2022</th>
<th>Wednesday^11/2/2022</th>
<th>Thursday^11/3/2022</th>
<th>Friday^11/4/2022</th>
<th>Saturday^11/5/2022</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Rest Day</td>
<td>Vacation</td>
<td>Vacation</td>
<td>Office</td>
<td>Remote</td>
<td>Office</td>
<td>Rest Day</td>
</tr>
</tbody>
</table>

Answer 2

因此您可以使用nth-child，这将对有所帮助

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-孩子？retiredLocale=取消