电子邮件模板td不堆叠移动版？

Question

我试图在移动设备上查看电子邮件模板时将两个表格单元彼此堆叠在一起。虽然代码在浏览器中查看电子邮件时起作用，但它不在移动电子邮件客户端中使用？

如何为移动布局制作表格堆栈？

媒体查询：

@media only screen and (max-width: 600px) { 
    *[class=hero-block] { 
     width: 100%; 
     display: block !important; 
     text-align: center; 
     clear: both; 
    } 
} 

HTML：

<table bgcolor="000000" border="0" cellpadding="0" cellspacing="0" width="100%"> 
    <tr> 
     <td class="hero-block"> 
      <img src="hero.jpg" height="265" width="245" /> 
     </td> 
     <td class="hero-block" width="295"> 
      <table bgcolor="000000" border="0" cellpadding="0" cellspacing="0" width="100%"> 
       <tr> 
        <td align="left"> 
         <font color="#ffffff" face="Arial,Verdana,sans-serif" size="1" style="font-size: 22px; line-height: 22px;">Thanks for signing up</font> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <img style="display: block; border:0; margin: 0; padding: 0;" src="x.gif" height="20" width="1" alt="x" /> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

Answer 1

TD的停止现在的Android堆叠安静一段时间。一个解决方案是使用TH代替，它适用于Android和iOS。试试我下面的代码在测试电子邮件：

@media only screen and (max-width: 600px) { 
 
     *[class=hero-block] th{ 
 
      width: 100%; 
 
      display: block !important; 
 
      text-align: center; 
 
      clear: both; 
 
     } 
 
    }

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="hero-block"> 
 
        <tr> 
 
         <th align="left" style="font-weight:normal;" bgcolor="#000000"> 
 
          <font color="#ffffff" face="Arial,Verdana,sans-serif" size="1" style="font-size: 22px; line-height: 22px;">Thanks for signing up</font> 
 
         </th> 
 
         <th align="left" style="font-weight:normal;" bgcolor="#ffffff"> 
 
          <font color="#000000" face="Arial,Verdana,sans-serif" size="1" style="font-size: 22px; line-height: 22px;">Thanks for signing up</font> 
 
         </th> 
 
        </tr> 
 
       </table>

使用此代码时一定要使用字体的重量为正常否则块内即可将文字加粗。

干杯