100%宽度的表格在Gmail Android中不起作用

我正在尝试构build一个响应式电子邮件 – 除了一些不适用于Android的Gmail合作的小件外,其实它们的工作方式非常好。

我有这些严肃简单的黑色条纹在电子邮件的顶部作为装饰元素:

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

然而,它们并不仅仅是一个黑色和白色的小条,类似于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> 

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

如果您还没有find解决方法,请尝试

style =“width:100%!important”like

  <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000" style="width:100%!important"> 

Gmail喜欢去掉大部分的CSS,但是如果你添加一个标签!重要的是大部分时间都会保留它们。

所以,提醒Gmail,100%表示通过在我们的<table>中添加min-width:100%来100%。

资源

经过广泛的testing后,解决scheme如下所示,将适用于所有电子邮件客户端(在Litmus上可用)的任何垂直间距问题, Andriod上的Gmail应用程序。

 <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100% !important;"> <tr> <td bgcolor="#00a0cc" height="25" style="background:#00a0cc;height:25px;line-height:0;font-size:0;">&nbsp;<br /></td> </tr> </table> 

关键点是适用width:100% !important对桌子width:100% !important ,不适用于td 。 这也是替代垂直间隔图像的最佳解决scheme。

我不熟悉为客户/网站/等为任何不是专为PCdevise的,所以我不知道这是否会工作,但尝试这样做。

 <center> <h1 style="color:#888888;">Android Client Header</h1> <p>Demonstration</p> </center> <hr color="#000000" style="height:11px;"> <hr color="#FF0000" style="height:2px;"> <hr color="#000000" style="height:1px;"> <hr color="#FF0000" style="height:30px;"> <h3 style="color:#0070ff;">Content 1</h3> <p color="#808080">E-mail Here</p> <hr color="#000000"> <center> <h1 style="color:#db880f;text-size:10px;">Android Client Footer</h1> <p style="color:#888888;">Demonstration</p> </center> 

即使你失去了“表格”元素的function,这是我想出的一个示例,尽我所能匹配你的线条装饰的颜色和大小设置。