Power Automate生成Outlook邮件表格CSS样式失效问题求助

问题根源 #

O365 Outlook桌面版（v2311及多数版本）采用Word的HTML渲染引擎，而非浏览器引擎，对CSS的支持极其有限：

• 不支持内部/外部样式表中类选择器的width属性，仅能识别内联样式或HTML原生属性
• 百分比宽度渲染不稳定，优先识别固定像素宽度
• div等块级元素的宽度设置经常被忽略，表格是唯一可靠的布局容器

实现目标的具体方案 #

要同时满足「.header宽度匹配表格」和「左侧表头横向结构」的要求，必须放弃类选择器设置宽度，改用表格内联样式+原生属性的方案：

修改后的代码示例 #

<!-- 外层表格控制整体宽度，确保.header与表格宽度一致 -->
<table width="600" style="table-layout:fixed; border-collapse:collapse; margin:0; padding:0;">
  <!-- 替代原来的.header元素，用表格单元格实现标题栏 -->
  <tr>
    <td colspan="2" style="width:600px; background:#eee; padding:12px 16px; font-size:16px; font-weight:bold;">
      新记录详情
    </td>
  </tr>
  <!-- 左侧表头的横向结构 -->
  <tr>
    <th style="width:180px; text-align:left; padding:10px 16px; background:#f8f8f8; border-bottom:1px solid #eee;">
      客户名称
    </th>
    <td style="width:420px; padding:10px 16px; border-bottom:1px solid #eee;">
      <!-- 这里插入Monday.com的动态字段，比如@{triggerBody()?['customer_name']} -->
      某某科技有限公司
    </td>
  </tr>
  <tr>
    <th style="width:180px; text-align:left; padding:10px 16px; background:#f8f8f8; border-bottom:1px solid #eee;">
      订单编号
    </th>
    <td style="width:420px; padding:10px 16px; border-bottom:1px solid #eee;">
      <!-- 动态字段示例 -->
      OD-20240520-001
    </td>
  </tr>
</table>

关键调整说明 #

1. 用表格替代div布局：将原来的.header div替换为表格的 colspan单元格，确保宽度与外层表格完全一致
2. 内联样式强制生效：所有宽度、背景、padding等样式全部用style属性直接写在元素上
3. 固定像素宽度：外层表格和内部单元格都用固定像素宽度，避免Outlook渲染偏差
4. table-layout:fixed：强制表格按设置的宽度渲染，防止内容撑开表格

额外注意事项 #

• Power Automate中插入动态字段时，确保直接嵌入到或标签内，不要破坏HTML结构
• 测试时必须用Outlook桌面版预览，网页版Outlook的CSS支持更好，不能代表桌面版效果
• 避免使用浮动、flex、grid等现代布局属性，Outlook完全不支持

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