响应电子邮件 - 媒体查询中心

Question

我有这张桌上有一个标志。

<td class="header" style="padding: 10px 20px 0 10px;"> 
    <table align="left" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td style="padding: 10px 0 0 10px;"> 
     <img src="images/logo.png" alt="Logo"/> 
     </td> 
    </tr> 
    </table> 
    <!--[if (gte mso 9)|(IE)]> 
    <table width="335" align="left" cellpadding="0" cellspacing="0" border="0"> 
     <tr> 
     <td> 
    <![endif]--> 
    <table class="col325" align="right" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 325px;padding-top:10px;"> 
    <tr> 
     <td height="55" bgcolor="#deecf7" style="text-align:center;color:#000;font-weight:bold;"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </td> 
    </tr> 
    </table> 
    <!--[if (gte mso 9)|(IE)]> 
     </td> 
     </tr> 
    </table> 
    <![endif]--> 
</td> 

正如你可以看到我有align =“left”，但我想这是从媒体查询中心的移动版我如何可以覆盖align =“left”？

Answer 1

所以我得到这个工作，所以我想我会后我得到了它，以防别人是有一个类似的问题开展工作。

这是媒体查询的魔法清除最大宽度，我有内嵌在下面的样式

body[yahoo] .logo{max-width:none !important;text-align: center;} 

这是头整个TD。

<td class="header" style="padding: 10px 20px 0 10px;"> 
    <table align="left" border="0" cellpadding="0" cellspacing="0" class="logo" style="width:100%;max-width:220px;"> 
    <tr> 
     <td style="padding: 10px 0 0 10px;"> 
     <a href="#"><img src="images/logo.png" alt="Logo"/></a> 
     </td> 
    </tr> 
    </table> 
    <!--[if (gte mso 9)|(IE)]> 
    <table width="335" align="left" cellpadding="0" cellspacing="0" border="0"> 
     <tr> 
     <td> 
    <![endif]--> 
    <table class="col325" align="right" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 325px;padding-top:10px;"> 
    <tr> 
     <td height="55" bgcolor="#deecf7" style="text-align:center;color:#000;font-weight:bold;"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </td> 
    </tr> 
    </table> 
    <!--[if (gte mso 9)|(IE)]> 
     </td> 
     </tr> 
    </table> 
    <![endif]--> 
</td> 

Answer 2

如果你愿意有这个表“居中”，那么你可以像下面：

<div align="center"> 
<table border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td style="padding: 10px 0 0 10px;"> 
      <img src="images/logo.png" alt="Logo"/> 
     </td> 
    </tr> 
</table> 
</div> 

因为它会显示你的表中的“中心”，这将是一个有点响应所有设备。

Answer 3

诀窍是使用父元素并切换图像表的宽度。

左对齐：

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#DDDDDD"> 
    <tr> 
    <td align="center"> 

     <table bgcolor="#CCCCCC" width="100%" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td align="left"> 
      <img src="images/logo.png" width="100px" height="100px" alt="Logo" style="" style="margin: 0; border: 0; padding: 0; display: block;"/> 
      </td> 
     </tr> 
     </table> 

    </td> 
    </tr> 
</table> 

现在使用媒体查询，以改变内部表的宽度。在这里，我只是把它内嵌证明：

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#DDDDDD"> 
    <tr> 
    <td align="center"> 

     <table bgcolor="#CCCCCC" width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100px !important;"> 
     <tr> 
      <td align="left"> 
      <img src="images/logo.png" width="100px" height="100px" alt="Logo" style="margin: 0; border: 0; padding: 0; display: block;"/> 
      </td> 
     </tr> 
     </table> 

    </td> 
    </tr> 
</table>