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>

电子邮件HTML无法在手机上拉伸表格全宽

1 个答案: