为什么 Outlook 桌面没有按预期呈现 html？答案

【问题标题】：why isn't outlook desktop rendering html as intended?为什么 Outlook 桌面没有按预期呈现 html？
【发布时间】：2021-12-22 04:12:00
【问题描述】：

那么为什么 Outlook 桌面不呈现这些突出显示的列？对 HTML/CSS 不太熟悉，所以有点迷茫。这显示在我的网络浏览器中，并带有突出显示的列。我的理解是渲染引擎支持 colgroup，所以我不确定我缺少什么。谢谢

<table>
   <colgroup>
      <col style="background-color:#FFFF00">
      <col>
      <col>
      <col>
      <col>
      <col style="background-color:#FFFF00">
      <col style="background-color:#FFFF00">
      <col>
      <col>
      <col style="background-color:#FFFF00">
      <col style="background-color:#FFFF00">
      <col>
   </colgroup>
   <thead>
      <tr>
         <th>Pro Number</th>
         <th>Date</th>
         <th>Est Delivery Date</th>
         <th>Origin</th>
         <th>Destination</th>
         <th>Terms</th>
         <th>Total A/R</th>
         <th>Responsible Account</th>
         <th>Responsible Customer</th>
         <th>Responsible Name</th>
         <th>Responsible Risk Code</th>
         <th>Responsible Analyst</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>123456789</td>
         <td>2021-11-24</td>
         <td>2021-11-29</td>
         <td>LOU</td>
         <td>CIN</td>
         <td>Collect</td>
         <td>1000</td>
         <td>1</td>
         <td>1</td>
         <td>Sample Customer</td>
         <td>CASH ONLY - NO BUSINESS ALLOWED</td>
         <td>Sample Analyst</td>
      </tr>

 
   </tbody>
</table>

编辑：我尝试不使用 col 和 colgroup 并且这有效。只需要能够为每一行使用一个动态变化的表来做到这一点。

<table>

   <thead>
      <tr>
         <th>Pro Number</th>
         <th>Date</th>
         <th>Est Delivery Date</th>
         <th>Origin</th>
         <th>Destination</th>
         <th>Terms</th>
         <th>Total A/R</th>
         <th>Responsible Account</th>
         <th>Responsible Customer</th>
         <th>Responsible Name</th>
         <th>Responsible Risk Code</th>
         <th>Responsible Analyst</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td bgcolor="#FFFF00">123456789</td>
         <td>2021-11-24</td>
         <td>2021-11-29</td>
         <td>LOU</td>
         <td>CIN</td>
         <td bgcolor="#FFFF00">Collect</td>
         <td bgcolor="#FFFF00">1000</td>
         <td>1</td>
         <td>1</td>
         <td bgcolor="#FFFF00">Sample Customer</td>
         <td bgcolor="#FFFF00">CASH ONLY - NO BUSINESS ALLOWED</td>
         <td>Sample Analyst</td>
      </tr>

 
   </tbody>
</table>

【问题讨论】：

我的猜测是 Outlook 引擎不支持 col 和 colgroups。所有电子邮件提供商都提供不同的支持。经验法则是始终简单地使用标准表格标记和内联样式，以便在所有基础上 100% 覆盖。我在这里汇总了一些指向以前关于 HTML 电子邮件的答案的链接：stackoverflow.com/questions/62400749/…
感谢@Martin，我尝试了另一种方法，这似乎有效。我只需要能够突出显示特定列的每一行。我的样本只有 1 行，但最后这个表大小会每天变化。
我认为，“使用表格”是这个问题的答案。

标签： html css outlook power-automate

【解决方案1】：

我不得不满足于突出标题。 Outlook 桌面使用旧的渲染引擎，似乎只能与内联 css 一起使用

         <th  style="background-color:#FFFF00">Pro Number</th>
         <th>Date</th>
         <th>Est Delivery Date</th>
         <th>Origin</th>
         <th>Destination</th>
         <th  style="background-color:#FFFF00">Terms</th>
         <th  style="background-color:#FFFF00">Total A/R</th>
         <th>Responsible Account</th>
         <th>Responsible Customer</th>
         <th  style="background-color:#FFFF00">Responsible Name</th>
         <th  style="background-color:#FFFF00">Responsible Risk Code</th>
         <th>Responsible Analyst</th>

【讨论】：