如何用纯HTML高亮Outlook邮件报表中含“Mango”的内容？

可以实现，但需要适配Outlook对CSS的有限支持——必须使用内联样式，因为Outlook桌面版不支持外部样式表、内部<style>标签中的大部分高级选择器（如属性选择器、伪类）。

1. 静态表格场景（已知Mango位置） #

直接给对应<tr>标签添加内联背景样式即可，示例代码：

<table border="1" cellpadding="4" cellspacing="0">
  <tr>
    <th>产品名</th>
    <th>销量</th>
    <th>营收</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>120</td>
    <td>$2400</td>
  </tr>
  <!-- 高亮Mango所在行 -->
  <tr style="background-color: #ffffcc;">
    <td>Mango</td>
    <td>85</td>
    <td>$1700</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>200</td>
    <td>$1000</td>
  </tr>
</table>

2. 动态表格场景（Mango可能存在或不存在） #

如果表格是从数据源动态生成的，在渲染HTML时判断产品名称是否为“Mango”，匹配则为该行添加内联样式。以下是伪代码示例：

<table border="1" cellpadding="4" cellspacing="0">
  <tr>
    <th>产品名</th>
    <th>销量</th>
    <th>营收</th>
  </tr>
  <!-- 遍历产品列表并动态渲染行 -->
  {% for product in productList %}
  <tr {{ product.name === 'Mango' ? 'style="background-color: #ffffcc;"' : '' }}>
    <td>{{ product.name }}</td>
    <td>{{ product.sales }}</td>
    <td>{{ product.revenue }}</td>
  </tr>
  {% endfor %}
</table>

关键注意事项 #

• 颜色格式：优先使用十六进制颜色值（如#ffffcc），避免颜色名称或RGB格式，确保在Outlook中正常显示。
• 禁用高级选择器：不要尝试用td:contains('Mango')这类CSS选择器，Outlook桌面版完全不支持，无法生效。

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