2015-07-21 105 views
0

我在PHP程序中有這個嵌入式CSS,以顯示錶格的背景顏色。HTML gmail沒有顯示背景顏色?

<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

Gmail將頭部和身體標籤完全剝離,只識別樣式標籤中的某些元素樣式。

您將需要內聯樣式。爲了解決這個問題,我會以編程方式構建您的電子郵件,然後通過內聯運行它。 This is a good example of one from Mailchimp

這應該可以解決您的問題,但是您可能會遇到任何媒體查詢或希望保留在head標籤中的類似項目。我會確保在每次通過內聯器運行它時跨越所有設備測試您的電子郵件,以確保它能夠跨越客戶端正常工作。

+0

謝謝!我發現了一個PHP inliner: https://gist.github.com/barock19/1591053#file-premailer-php –

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%;"> 

等。

希望這有助於:)如果你想寫你CSS出來像一個正常的網頁 -Shaun

P.S然後把這些類在你的元素使用this tool

+0

一個外部工具沒有用,因爲它是一個爲gmail生成HTML電子郵件的PHP程序。但是,這解決了這個問題: https://gist.github.com/barock19/1591053#file-premailer-php –