Outlook环境下邮件模板<td>宽度设置不符合预期问题求助

问题根因 #

1. 中间<td>内部的<p>标签设置了min-width:600px，远大于你给该<td>设置的400px宽度，直接将单元格撑大导致宽度失效
2. 内层表格没有启用固定布局模式，默认的自动表格布局会优先适配内容宽度，忽略你给单元格设置的宽度值
3. 直接使用HTML原生width属性设置单元格宽度的兼容性弱于内联样式写法，部分场景下会被浏览器优先适配内容的逻辑覆盖
4. 图片样式中max-height:50缺失单位，可能导致浏览器解析异常

修复方案 #

按以下步骤修改代码即可：

• 给内层<table>添加table-layout: fixed样式，同时设置总宽度为三个单元格宽度之和600px
• 删除中间单元格内<p>标签的min-width:600px属性
• 把所有<td>的宽度从原生属性改为内联样式width: 数值px写法
• 补全图片样式中max-height的单位为px

修复后完整代码

<tr>
    <td class="padding content"
        style="padding-top:0;padding-right:25px;padding-bottom:20px;padding-left:25px;width:100%;text-align:left;font-size:15px;">
        <!-- 内层表格添加固定布局和总宽度 -->
        <table style="table-layout: fixed; width: 600px;">
            <tr>
                <!-- 改用内联样式设宽度 -->
                <td style="width: 80px;">
                    <!-- 补全max-height的px单位 -->
                    <img src="https://i.ibb.co/MCXhwJB/authenticator-app-icon-large.png" width="50" height="50" alt=""style="border-width:0;width:100%;max-width:50px;max-height:50px;padding-right:10px;">
                </td>
                <!-- 改用内联样式设宽度 -->
                <td style="width: 400px;">
                   <!-- 删除min-width:600px属性 -->
                   <p style="font-size:18px;line-height: 23px; display: inline;"><strong>Multi-Factor Authenticator (MFA)</strong></p>
                </td>
                <!-- 改用内联样式设宽度 -->
                <td style="width: 120px;text-align: center;">
                    <table cellspacing="0" cellpadding="0">
                        <tr>
                            <td style="-webkit-border-radius: 10px; -moz-border-radius: 10px; border:2px solid #007da5; border-radius: 10px; color: #ffffff; display: block;">
                                 <a href="http://www.EXAMPLE.com/" style="font-size:16px;   text-decoration: none; line-height:40px; width:100%; display:inline-block">
                                    <span style="color: #007da5; padding:10px 5px;">Learn More </span>
                                 </a>
                            </td>
                       </tr>
                   </table>
                </td>
            </tr>
        </table>
    </td>                      
</tr>

内容的提问来源于stack exchange，提问作者C.Radford