电子邮件html在手机上不拉伸表全宽

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代码中给出了“第一个标题”和“第二个标题”作为内容，因此第二个标题的字符大于第一个标题，因此宽度将不匹配。

解决方案是：

<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>