HTML電子郵件-GMAIL顯示塊無法正常工作

Question

我一直在創建一個必須響應的HTML電子郵件活動。 在台式機上，電子郵件有2列，但在移動設備上，電子郵件必須顯示為1列。

這在其他客戶端上可以正常使用，但是在Gmail中，列（td）不能全角顯示（已附加圖像）。

所以結構是這樣的：

<table class="w640">
  <tr>
    <td class="w640">COLUMN 1</td>
    <td class="w640">COLUMN 2</td>
 </tr>
</table>

那么CSS是：

@media only screen and (max-width: 639px) {
 table[class=w640], 
 td[class=w640] { width:90% !important; display:block !important; }
}

這就是Gmail中發生的事情。 2列的寬度不是100％：

Answer 1

我認為您的問題可能是您沒有為表格分配寬度。 您可以為此設置靜態（px）或靈活（％）的寬度。

然后，td＆tr上的Display block應該會為您完成這項工作。 希望對您有所幫助。

 @media only screen and (max-width: 639px) { tr td { display: block; /*neccasary*/ } } td { background: blue; } table { text-align: center; width: 90%; background: red; margin: 0 auto; } div { background: yellow; width: 400px; /*neccasary if table is given a percentage*/ height: 400px; } 

 <div> <table class="w640"> <tr> <td class="w640">COLUMN 1</td> <td class="w640">COLUMN 2</td> </tr> </table> </div> 

Answer 2

我有似乎完全相同的問題，正在尋找解決方案。 我已經為表格指定了寬度，所以不是。

最后，我用<th>代替了<td> ，現在可以了！

希望這對某人有幫助。