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＆amp; amp; tr应该为你做的工作。 希望能帮到你一点。

＆＃13;

＆＃13;

@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; 
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我遇到了似乎完全相同的问题，并正在寻找解决方案。我已经为表格指定了宽度，所以不是。

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

希望这对某人有帮助。