如何使用MJML构建列中嵌套列的复杂邮件布局

问题原因 #

MJML 渲染时会给组件附加默认的邮件兼容样式，优先级高于你写的部分内联样式，同时你当前的实现存在以下问题：

1. 没有给mj-table配置默认的cellpadding、cellspacing属性，不同邮件客户端的表格默认边距不一致
2. 表格第二行没有设置colspan跨列，和第一行的两列结构冲突导致宽度错位
3. 给tr设置padding不生效，表格行本身不支持padding属性
4. 手机壳图片链接存在多余空格，导致图片加载异常

修改方案 #

你可以直接使用下面调整后的代码实现预期效果：

<mj-head>
        <mj-attributes>
            <mj-text padding="0" font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;" color="#1d1d1f"/>
            <mj-section padding="0"/>
            <mj-wrapper padding="0" background-color="#fff" border-right="1px solid right"/>
            <mj-button padding="0"/>
            <mj-column padding="0"/>
            <mj-image padding="0"/>
            <!-- 新增mj-table默认配置，清除客户端默认边距 -->
            <mj-table padding="0" cellpadding="0" cellspacing="0" border="0"/>
            <mj-class name="head-text" font-size="36px" font-weight="600"/>
            <mj-class name="product" border-radius="15px"/>
        </mj-attributes>     
</mj-head>

<mj-body>
    <mj-wrapper>
         <mj-section>
              <mj-column width="45%" background-color="#f3f7fd">
                    <mj-image src="https://image.s10.sfmc-content.com/lib/fe3411717064057d731372/m/1/8c5599db-0f74-40e1-8704-5bf6465deb88.png" alt="iphone 13" />
                     <mj-text>
                               <p style="margin:8px">New</p>
                               <p style="margin:8px">iPhone 13</p>
                               <p style="margin:8px 8px 25px">From $799 or $33.29/mo. for 24 mo. <sup>1</sup></p>
                      </mj-text>
              </mj-column>
              <mj-column width="45%" >
                    <mj-table width="100%">
                               <tr>
                                    <!-- 内边距写在td上，设置垂直顶部对齐 -->
                                    <td style="width: 50%; padding-left: 20px; vertical-align: top;">
                                        <p style="margin:0 0 8px 0;">New</p>
                                        <p style="margin:0 0 8px 0;">iPhone 13</p>
                                        <p style="margin:0 0 8px 0;">Silicone Case</p>
                                        <p style="margin:0;">$49</p>
                                    </td>
                                    <td style="width: 50%; text-align: right;">
                                        <!-- 修正链接中的多余空格 -->
                                        <img style="width: 100px" 
                                         src="https://image.s10.sfmc-content.com/lib/fe3411717064057d731372/m/1/d8c123db-38c2-4e79-b169-e243b320c6a8.png" alt="iphone 13 case"/>
                                    </td>
                               </tr>
                               <tr>
                                    <!-- 新增colspan属性跨两列 -->
                                    <td colspan="2" style="padding-top: 16px;">
                                        <img style="width: 200px;" src="https://image.s10.sfmc-content.com/lib/fe3411717064057d731372/m/1/62b98203-08b0-4974-b1c8-931b2e710b16.png" alt="snowflake magsafe"/>
                                    </td>    
                               </tr>
                   </mj-table>
             </mj-column>
        </mj-section>
    </mj-wrapper>

优化建议 #

如果后续调试表格觉得麻烦，也可以把右侧列拆成两个独立的嵌套mj-section，直接用mj-text和mj-image组件实现布局，不需要写原生table代码，MJML会自动处理邮件端的兼容性，调试效率更高。

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