Power Automate邮件表格首列橙色背景CSS样式不生效问题

问题概述 #

使用Power Automate生成邮件内嵌表格时，需要将姓名列（首列）设置为橙色背景，但配置的CSS样式始终无法生效。相关样式表和Power BI输出的HTML代码如下：

配置的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>

Power BI输出的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>  <!-- 此列需要橙色背景 -->
  <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>

问题原因 #

1. HTML语法错误：HTML代码中<th>Friday^11/4/2022</th>缺失开头的<，写成th>Friday^11/4/2022</th>，导致表格结构异常，影响样式渲染。
2. 邮件客户端CSS兼容性限制：多数邮件客户端（如Outlook）对CSS3选择器（如nth-child）支持有限，<style>标签内的此类选择器会被忽略。
3. 样式优先级不足：现有选择器table tr td:nth-child(1)与table tbody td优先级相同，若客户端解析顺序异常，无法覆盖默认样式。

解决办法 #

步骤1：修复HTML语法错误 #

将错误行修正为：

<th>Friday^11/4/2022</th>

步骤2：选择兼容的样式实现方案 #

方案一：内联样式（兼容性最强）

直接在姓名列的<td>标签中添加内联样式，所有邮件客户端都支持：

<td style="background-color: orange;">John Doe</td>

方案二：类选择器提升兼容性

给姓名列的<td>添加自定义类，再用类选择器设置样式：

1. 修改HTML：

<td class="name-col">John Doe</td>

2. 修改CSS：

table td.name-col {
  background-color: orange !important;
}

方案三：调整CSS选择器优先级

用更具体的选择器替代nth-child，提升兼容性：

table > tbody > tr > td:first-child {
  background-color: orange !important;
}

注：若使用<style>标签样式，建议将样式代码放在HTML内容最顶部，避免邮件客户端截断样式。

内容的提问来源于stack exchange，提问作者thebigrlebowski