HTML 电子邮件 - GMAIL 显示 block 无法正常工作

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 中正在发生的事情。两列的宽度不是 100%:

Answer 1

我认为您的问题可能是您没有为表格分配宽度。 您可以为其指定静态 (px) 或灵活 (%) 宽度。

td & tr 上的显示 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>