100％寬度的表格在Gmail中無法使用Android

我正在嘗試構建一個響應式電子郵件 - 它的實際工作效果非常好，除了在Android版Gmail中沒有配合使用的一些小件外。100％寬度的表格在Gmail中無法使用Android

我有這些嚴重簡單的黑色條紋是坐在電子郵件的頂部作爲裝飾元素：

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

如何使這些跨越電子郵件的整個寬度有什麼建議？

來源

2014-09-02 nebulousecho

@Fabio HTML5是肯定不會在電子郵件客戶端的支持。對於電子郵件，不幸的是，最好的做法是使用「嚴重不贊成」的代碼。 http://stackoverflow.com/questions/2935472/html-email-tables-or-divs – rds 2014-09-08 23:23:19

+10

如果您還沒有找到解決方法，請嘗試style =「width：100％！important」，例如

... 我正在處理這個問題現在。 Gmail喜歡去掉大部分的CSS，但是如果你添加一個標籤！重要的將會讓他們保持大部分時間，我設法讓我的電子郵件生成100％爲1366px（我的屏幕大小），但是這留下了一個水平滾動條。如果我找到完整的解決方案，我會在這裏發佈。或者如果你解決了它，我很想知道，我已經看到它在其他電子郵件中完成，所以這是可能的。 – JoeyPhillips2014-09-23 23:09:09

@JoeyPhillips這爲我工作！你應該得到正確答案的信用。關鍵是確實在style屬性中的width聲明中加入重要的東西。感謝您分享這一點。 – 2014-09-24 18:46:43

回答

如果你還沒有找到一個解決辦法嘗試

風格=「寬度：100％重要」之類

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

的Gmail喜歡脫光大部分CSS的，但如果你添加一個標籤重要的是會讓他們大部分時間都在。

來源

2014-09-26 20:09:06 JoeyPhillips

這應該被標記爲正確答案！這是我無法追查的那些令人討厭的問題中的又一個問題，但是它解決了這個問題！ – 2015-02-12 15:40:24

這讓我在過去一週感到沮喪。我希望gmail能解決這個問題！謝謝！ – 2016-03-10 15:17:20

它停止工作了嗎？ Gmail在Android客戶端上自動調整我的表格大小，但爲用戶提供了禁用自動調整大小的選項，可以解決問題... – MatheusJardimB 2016-03-31 15:03:22

我並不熟悉爲任何不是專爲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>

即使你失去了「表」元素的功能，這是我來到了，盡我所能對決的顏色和大小設置爲紋飾的樣本例子。

來源

2014-09-24 14:15:12

經過大量測試後，以下解決方案將適用於所有電子郵件客戶端（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表中，將不會應用到td工作。這也是替代垂直間隔圖像的最佳解決方案。

來源

2015-02-17 04:10:39 Mark

所以提醒Gmail，100％是指通過在我們的<表>上添加最小寬度：100％的100％。

source

來源

2015-09-25 09:32:57 insulaner

這適用於我的情況。然後，您可以在媒體查詢中添加最小寬度：0，以便爲支持媒體查詢的電子郵件客戶端刪除此規則。 – jarace87 2016-04-26 15:32:40

這是我的問題缺失的一塊！在我的原因中，我試圖創建一個總寬度爲580px的固定寬度電子郵件模板，但Gmail會將其變成流暢寬度的表格。添加'width：580px！important; min-width：580px！important;'是它所需要的。乾杯！ – 2017-08-15 18:25:59

相關問題