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> ，现在可以了！

希望这对某人有帮助。