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>

正如你可以看到我有对齐=“左”，但我希望这是从移动版本的媒体查询中心，我如何覆盖对齐=“左”？

Answer 1

如果您愿意将此表格“居中”，那么您可以执行以下操作：

<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 2

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

左对齐：

<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>

Answer 3

所以我得到了它的工作，所以我想我会发布如何让它工作，以防其他人有类似的问题。

这是媒体查询的神奇之处，用于清除我在下面的样式中内联的最大宽度

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>

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

3 个答案: