嵌套表格宽度异常：Outlook Windows桌面端邮件模板渲染问题

问题根因 #

Windows桌面端Outlook 2016/2019采用Word内核渲染HTML邮件，对CSS支持度极低，存在大量独有的渲染bug，你遇到的两个同结构嵌套表格宽度不一致是该内核的典型问题，本质是父级单元格的宽度属性没有被内核正确传递给第二个嵌套表格。

修复方案 #

按照以下规则修改代码即可解决问题：

• 所有和布局相关的宽度属性必须双写：同时加HTML原生width属性+行内style的width值，不要只写在头部CSS类里
  外层包裹嵌套表格的<td>要统一加上width="100%" style="width:100%;"，两个表格的父td都要加，不能省略
• 嵌套的.dataTable表格额外加table-layout: fixed;行内样式，同时补原生width="100%"属性，强制表格按设定宽度渲染，避免内容挤压导致宽度异常
• 替换所有text-align: end为text-align: right，Word内核不支持end属性值
• 不要依赖nth-of-type这类CSS选择器，Outlook内核无法识别，偶数行的背景色直接写在行内style里
• 核心布局、字体样式尽量都写到行内，不要放在头部style块中，Outlook对头部CSS的支持度非常差

核心修改代码示例 #

<!-- 两个嵌套表格的父td都按这个格式修改 -->
<tr width="100%" align="center">
  <td class='dataTableContainer' width="100%" style="width:100%;text-align:left;">
    <table cellpadding="0" cellspacing="0" width="100%" class="dataTable" style="width:100%;table-layout:fixed;font-size:14px;border-collapse: collapse;border: 0.5px solid gray;">
      <!-- 原有表格内容 -->
    </table>
  </td>
</tr>

修改完成后即可解决两个表格宽度不一致的渲染异常。

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