适配Outlook的响应式表格问题：max-width限制失效

问题根源 #

你的表格max-width不生效主要有两个原因：

• 表格内的两张图片设置了固定宽度378px，两者总宽度756px超过了表格的max-width:700px，直接把表格撑大
• 桌面版Outlook对CSS的max-width支持不友好，需要特殊兼容处理

修正后的代码 #

<!--[if mso]>
<style>
  .responsive-table { width:700px !important; }
</style>
<![endif]-->
<table class="responsive-table" border="0" cellspacing="0" style="border-collapse:collapse; border-spacing:0; font-family:'montserrat','calibri'; font-size:13px; width:100%; max-width:700px; margin:0 auto;">
  <tbody>
    <tr>
      <td style="background-color:#0063af; padding:0; text-align:left; width:50%; max-width:350px;">
        <img alt="" height="81" src="path/to/img" style="display:block; max-width:100%; height:auto;" width="378" />
      </td>
      <td style="background-color:#0063af; padding:0; text-align:right; width:50%; max-width:350px;">
        <img alt="" height="81" src="path/to/img" style="display:block; max-width:100%; height:auto;" width="378" />
      </td>
    </tr>
    <tr>
      <td colspan="2" style="padding:10px;"></td>
    </tr>
  </tbody>
</table>
<style>
  @media screen and (max-width:700px) {
    .responsive-table { width:100% !important; }
    .responsive-table td { max-width:100% !important; width:100% !important; }
    .responsive-table img { width:100% !important; }
  }
</style>

关键修改说明 #

• 图片自适应：给图片添加style="display:block; max-width:100%; height:auto;"，解除固定宽度的强制约束，让图片随单元格宽度缩放
• 单元格宽度控制：给每个td设置max-width:350px（700px的一半），避免单元格被图片撑大超出表格限制
• Outlook兼容：用<!--[if mso]>条件注释给桌面版Outlook强制设置表格宽度为700px，解决它不识别max-width的问题
• 小屏适配：在媒体查询里强制表格和单元格占满100%宽度，确保屏幕小于700px时表格铺满屏幕

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