如何在MJML中为列设置固定宽度且无需使用类与媒体查询

针对Outlook转发移除类名的场景，直接将列的宽度规则全部写入行内即可，无需使用类名或媒体查询，适配方案如下：

• 优先使用HTML原生table布局（所有邮件客户端兼容度最高），列的宽度同时写HTML原生width属性和行内CSS的width属性，双写规则覆盖所有版本Outlook的解析逻辑
• 所有和布局、样式相关的规则全部写入元素行内style中，Outlook转发不会清除行内样式属性

代码示例 #

<table width="500" cellpadding="0" cellspacing="0" border="0" style="width:500px;">
  <tr>
    <!-- 固定宽度200px的列 -->
    <td width="200" style="width:200px; padding:10px; background:#f5f5f5;">
      左侧列内容
    </td>
    <!-- 固定宽度300px的列 -->
    <td width="300" style="width:300px; padding:10px; background:#ffffff;">
      右侧列内容
    </td>
  </tr>
</table>

注意事项 #

• 原生width属性只需写数值不需要加单位，行内CSS的width建议加上px单位，避免部分客户端解析异常
• 不需要添加!important声明，行内样式的优先级本身高于所有外部样式和类样式
• 如需要设置边框、边距、字体等其他样式，也全部写在行内style中即可，不要单独抽离为类

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