100%宽度的表格在Gmail Android中无效

neb*_*cho 15 html email gmail android responsive-design

我正在尝试构建一个响应式电子邮件 - 除了一些不在Android for Android中合作的小件外,它实际上全面运作.

我有这些非常简单的黑色条纹,它们位于电子邮件的顶部,作为装饰元素:

<table width="100%" cellpadding="0" cellspacing="0" align="center" valign="top">
    <tr><td width="100%" height="11" bgcolor="#000000"></td></tr>
    <tr><td width="100%" height="2" bgcolor="#FFFFFF"></td></tr>
    <tr><td width="100%" height="1" bgcolor="#000000"></td></tr>
    <tr><td width="100%" height="30" bgcolor="#FFFFFF"></td></tr>
</table>
Run Code Online (Sandbox Code Playgroud)

然而,它们并不像一小块黑白一样显示出类似于Gmail Android应用程序上的超薄感叹号.

同样,有一个页脚没有跨越电子邮件的整个宽度:

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000">
    <tr>
        <td>

        <table width="650" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000">
            <tr>
                <td align="right" class="footer">
                    <img src="images/footer.png" />
                </td>
            </tr>
        </table>

        </td>
    </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

有关如何使这些跨越电子邮件的整个宽度的任何建议?

小智 42

如果您还没有找到解决方案,请尝试

style ="width:100%!important"之类的

 <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000" style="width:100%!important">
Run Code Online (Sandbox Code Playgroud)

Gmail喜欢剥离大部分CSS,但是如果你添加一个标签!重要的是保留它们的大部分时间.


小智 11

因此,通过在我们的<table>中添加min-width:100%,提醒Gmail 100%表示100%.

资源

  • 这是我的问题所缺少的部分!在我的事业中,我试图创建一个始终为 580px 的固定宽度电子邮件模板,但 Gmail 会将其转换为流动宽度表格。添加 `width:580px!important;min-width:580px!important;` 正是它所需要的。干杯! (2认同)