Question

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

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

媒体查询：

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

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

使用此代码时，请务必正常使用font-weight，否则块内的文本将为粗体。

干杯

电子邮件模板td没有堆叠移动？

1 个答案: