电子邮件模板 td 没有为移动设备堆叠？答案

【问题标题】：Email template td not stacking for mobile?电子邮件模板 td 没有为移动设备堆叠？
【发布时间】：2018-03-22 21:34:00
【问题描述】：

当在移动设备上查看电子邮件模板时，我试图将两个表格单元格堆叠在一起。虽然代码在浏览器中查看电子邮件时有效，但在移动电子邮件客户端中不起作用？

如何制作移动布局的表格堆栈？

媒体查询：

@media only screen and (max-width: 600px) {
    *[class=hero-block] {
        width: 100%;
        display: block !important;
        text-align: center;
        clear: both;
    }
}

HTML：

<table bgcolor="000000" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td class="hero-block">
            <img src="hero.jpg" height="265" width="245" />
        </td>
        <td class="hero-block" width="295">
            <table bgcolor="000000" border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td align="left">
                        <font color="#ffffff" face="Arial,Verdana,sans-serif" size="1" style="font-size: 22px; line-height: 22px;">Thanks for signing up</font>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img style="display: block; border:0; margin: 0; padding: 0;" src="x.gif" height="20" width="1" alt="x" />
                    </td>
                </tr>
            </table> 
        </td>
    </tr>
</table>

【问题讨论】：

标签： html email html-table media-queries html-email

【解决方案1】：

TD 已停止在 Android 中的堆栈，以便在某个时候保持安静。一个解决方法是改用 TH，它适用于 Android 和 iOS。在测试电子邮件中试用下面的代码：

    @media only screen and (max-width: 600px) {
        *[class=hero-block] th{
            width: 100%;
            display: block !important;
            text-align: center;
            clear: both;
        }
    }

    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="hero-block">
                    <tr>
                        <th align="left" style="font-weight:normal;" bgcolor="#000000">
                            <font color="#ffffff" face="Arial,Verdana,sans-serif" size="1" style="font-size: 22px; line-height: 22px;">Thanks for signing up</font>
                        </th>
                        <th align="left" style="font-weight:normal;" bgcolor="#ffffff">
                            <font color="#000000" face="Arial,Verdana,sans-serif" size="1" style="font-size: 22px; line-height: 22px;">Thanks for signing up</font>
                        </th>
                    </tr>
                </table>

使用此代码时，请确保正常使用字体粗细，否则块内的文本将是粗体。

干杯

【讨论】：