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

【问题标题】：100% width tables don't work in Gmail Android100% 宽度的表格在 Gmail Android 中不起作用
【发布时间】：2014-10-27 02:48:37
【问题描述】：

我正在尝试构建一个响应式电子邮件 - 它实际上在所有方面都非常出色，除了一些小部分在 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>

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

【问题讨论】：

@Fabio html5 在电子邮件客户端中当然不受支持。不幸的是，对于电子邮件，最佳做法是使用“严重弃用”的代码。 stackoverflow.com/questions/2935472/html-email-tables-or-divs
如果您还没有找到解决方案，请尝试 style="width:100%!important" 像 ...我现在正在解决这个问题。 Gmail 喜欢剥离大部分 CSS，但如果你添加一个标签 !important 大部分时间都会保留它们，我设法让我的电子邮件生成 100% 为 1366 像素（我的屏幕尺寸），但这会留下一个水平滚动条。如果我找到了完整的解决方案，我会在这里发布。或者如果你解决了它，我很想知道，我已经在其他电子邮件中看到它完成了，所以它是可能的。

@JoeyPhillips 这对我有用！你应该得到正确答案的功劳。关键确实是添加 !important 到 style 属性内的宽度声明。谢谢你分享这个。

@JoeyPhillips 我同意 Matty B 的观点，这确实有效。如果您想添加您的评论作为答案，我很乐意将其标记为正确答案。

@Matty B &nebulusecho 不客气，这就是 stackoverflow 的用途，我将评论格式化为答案。

标签： android html email responsive-design gmail

【解决方案1】：

我不熟悉为任何不是为 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>

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

【讨论】：

【解决方案2】：

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

style="width:100%!important" 喜欢

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

Gmail 喜欢剥离大部分 CSS，但如果您添加标签 !important 将大部分时间保留它们。

【讨论】：

这应该被标记为正确答案！这是我无法追踪的另一个恼人问题，但这解决了它！
过去一周这让我很沮丧。我希望gmail能解决这个问题！谢谢！
它停止工作了吗？ Gmail 在 Android 客户端上自动调整我的表格大小，但提供了用户禁用自动调整大小的选项，这解决了问题...

【解决方案3】：

经过广泛测试后，以下解决方案将适用于所有电子邮件客户端（在 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;">&nbsp;<br /></td>
    </tr>
</table>

关键是将width:100% !important应用到表中，不适用于应用到td。这也是替换垂直间隔图像的最佳解决方案。

【讨论】：

【解决方案4】：

所以提醒 Gmail 100% 意味着 100% 通过添加 min-width:100% 到我们的
。
source

【讨论】：

这适用于我的情况。然后，您可以在媒体查询中添加 min-width: 0 以删除支持媒体查询的电子邮件客户端的此规则。

这是我的问题中缺少的部分！在我的事业中，我试图创建一个始终为 580 像素的固定宽度电子邮件模板，但 Gmail 会将它变成一个可变宽度的表格。添加width:580px!important;min-width:580px!important; 是它所需要的。干杯！