电子邮件 html 未在移动设备上展开 table 全宽

Question

我真的很讨厌电子邮件 html。所以我为我们的业务创建了一封新的确认电子邮件，我需要下图中的白色块具有相同的宽度。在桌面上，它们看起来完全匹配。

在不粘贴完整模板的情况下，代码的结构是这样的 css 我正在使用：

<table width="800" align="center" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td style="background-color: #F7F7F7;" bgcolor="#F7F7F7">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td>
                        <table style="width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
                            <tr>
                                <td>
                                    <p>First heading</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table style="width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
                            <tr>
                                <td>
                                    <p>Second heading</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

以及问题图片在手机上：

我很确定，因为 600px 在这样大小的设备上不可用，它正在查看内容的情况，但我不能使用 media queries，所以不太确定该转向哪里。

Answer 1

根据您在 TD 中的内容宽度显示的布局。上面的 HTML 代码你给了 "first heading" 和 "second heading " 作为内容所以第二个标题的字符比第一个标题多所以宽度不匹配。

解决方案是：

<table width="800" align="center" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td style="background-color: #F7F7F7;" bgcolor="#F7F7F7">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td>
                        <table style="min-width: 600px; max-width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
                            <tr>
                                <td>
                                    <p>First heading</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table style="min-width: 600px; max-width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
                            <tr>
                                <td>
                                    <p>Second heading</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

电子邮件 html 未在移动设备上展开 table 全宽

Email html not stretching table full width on mobile

html

css

html-email