HTML gmail没有显示背景颜色?

时间:2015-07-21 16:30:53

标签: css gmail html-email

我在PHP程序中有这个嵌入式CSS,用于显示表格的背景颜色。

<style>
table {
    width:100%;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
table#t01 tr:nth-child(even) {
    background-color: #eeeeee;
}
table#t01 tr:nth-child(odd) {
   background-color:#ffffff;
}
table#t01 th    {
    background-color: black;
    color: white;
}
</style>

我有这个:

<TABLE id="t01">

我已经获取了这个PHP程序的原始输出,将其保存为.html文件,将其上传到服务器,它的行为与我预期的一样。但是当作为HTML gmail时,它根本不显示背景颜色。

如果我在HTML中添加了bgcolor =“black”,那就有效了。所以我知道必须可以在html gmail中做背景颜色,但显然我没有在这里做。

PHP程序生成表格,我真的想让CSS处理行的奇数/偶数颜色。

优雅的编程解决方案是什么?谢谢!

2 个答案:

答案 0 :(得分:2)

Gmail会完全剥离头部和身体标签,并且只识别样式标记中的某些元素样式。

您需要内联样式。为了解决这个问题,我会以编程方式构建您的电子邮件,然后通过内联程序运行它。 This is a good example of one from Mailchimp

这可以解决您的问题,但您可能会遇到任何媒体查询或您希望保留在head标记中的类似项目的问题。每次通过内联器运行时,我都会确保在所有设备上测试您的电子邮件,以确保它能够跨客户端正常工作。

答案 1 :(得分:0)

首先,如果您在文件中包含PHP,则必须将其命名为.PHP

其次使用内嵌元素,因为像Gortonington说Gmail和其他一些电子邮件客户端剥离标签

我的意思是

<TABLE id="t01" style="width:100px; height:100px; font-size:12px;>

就像你想要的那样:

<table style="background-color:black;border-collapse: collapse; width:100%;">

等等。

希望这会有所帮助:) -Shaun

如果您想像普通网页一样编写所有CSS,那么请使用this tool

将这些类放在元素上