100% 宽度的表格在 Gmail Android 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25630139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
100% width tables don't work in Gmail Android
提问by nebulousecho
I'm trying to build a responsive email – it's actually working pretty great across the board, except for some small pieces that aren't co-operating in Gmail for Android.
我正在尝试构建一个响应式电子邮件——它实际上在所有方面都非常有效，除了一些不能在 Android 版 Gmail 中协作的小部分。
I have these seriously simple black stripes that sit at the top of the email as a decorative element:
我有这些非常简单的黑色条纹，它们位于电子邮件的顶部作为装饰元素：
<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>
Yet they don't display as anything more than a tiny strip of black and white that resembles an ultra-thin exclamation point on the Gmail Android app.
然而，它们仅显示为类似于 Gmail Android 应用程序上的超薄感叹号的一小段黑白条纹。
Likewise, there is a footer that isn't spanning the full width of the email:
同样，有一个页脚没有跨越电子邮件的整个宽度：
<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>
Any suggestions on how to make these span the full width of the email?
关于如何使这些跨越电子邮件的整个宽度的任何建议？
回答by JoePhillips
If you haven't found a solution try
如果您还没有找到解决方案，请尝试
style="width:100%!important" like
style="width:100%!important" 喜欢
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000" style="width:100%!important">
Gmail likes to strip most of the CSS, but if you add a label !important will keep them most of the time.
Gmail 喜欢去除大部分 CSS，但如果您添加标签 !important 将在大部分时间保留它们。
回答by insulaner
回答by Mark
After extensive testing the solution as follows will work for any vertical spacing issues across all email clients (available on Litmus), incl. Gmail App on Andriod.
经过大量测试后，如下解决方案将适用于所有电子邮件客户端（在 Litmus 上可用）的任何垂直间距问题，包括。Android 上的 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;"> <br /></td>
</tr>
</table>
Key point is to apply width:100% !importantto the table, will not work on applying to the td.
This is also the best solution for replacing vertical spacer images.
关键点是申请width:100% !important表，不会对申请表起作用td。这也是替换垂直间隔图像的最佳解决方案。
回答by Mark
I'm not familiar with making clients/sites/etc for anything that's not designed for PC, so I'm not sure if this will work or not, but try doing this.
我不熟悉为不是为 PC 设计的任何东西制作客户端/站点/等，所以我不确定这是否可行，但请尝试这样做。
<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>
Even though you lose the "table" element feature, this is a sample example I came up with, trying my best to matchup your color and size settings for the line decorations.
即使您失去了“表格”元素功能，这是我想出的一个示例示例，我会尽力匹配线条装饰的颜色和大小设置。
