如何不使用flexbox、grid实现邮件模板表格栅格响应式布局

核心问题解答 #

你需要优先使用百分比单位实现适配，vw单位兼容性在部分老旧邮件客户端表现较差，不推荐作为优先方案。

实现思路 #

邮件客户端对table原生属性支持度最高，不需要复杂样式即可实现类似justify-content: space-around的效果：

• 给table设置100%宽度+table-layout: fixed，强制所有td等分容器总宽度，内容不会把td撑得宽度不一致
• 所有td设置居中对齐，内部元素自动在td内居中，td左右的留白天然形成均匀间距，和space-around效果一致
• 所有元素默认保持在同一行，不会自动换行

单位选择说明 #

• 百分比单位：全邮件客户端兼容，table设100%宽度后自适应父容器大小，td自动等分宽度，内部元素可根据需求设置百分比或者固定px值
• vw单位：仅适合仅需适配移动端的场景，旧版Outlook等桌面邮件客户端对vw支持存在bug，全场景兼容不要用

完整兼容代码示例 #

<!-- 邮件模板table标准写法，所有样式尽量内联 -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed; width: 100%;">
    <tr>
        <td align="center" style="padding: 0 3px;">
            <div class="item" style="width: 100%; max-width: 36px; margin: 0 auto;">
                <div>0</div>
            </div>
        </td>
        <td align="center" style="padding: 0 3px;">
            <div class="item" style="width: 100%; max-width: 36px; margin: 0 auto;">
                <div>1</div>
            </div>
        </td>
        <!-- 剩余3-10的td结构完全一致，直接复制修改内容即可 -->
        <td align="center" style="padding: 0 3px;">
            <div class="item" style="width: 100%; max-width: 36px; margin: 0 auto;">
                <div>10</div>
            </div>
        </td>
    </tr>
</table>

• 代码里td的padding: 0 3px控制元素之间的间距，所有td统一数值即可保证间距均匀
• .item的max-width用于限制大屏下元素的最大尺寸，不需要可删除

响应式优化提示 #

如果小屏设备下11个元素过挤，可以在内嵌样式里加媒体查询调整字号和td的padding数值即可，不需要修改布局结构。

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