Question

嗨，我有一个问题，前景不是我的桌子部分。它由两列左对齐组成。它们位于桌面上的gmail和outlook中，但不在移动设备上。我猜两列左对齐给我一个问题。请帮帮我。

          <table border="0" cellpadding="0" cellspacing="0" align="center" style="padding:0 0 0 10px;">
          <tr>
          <td align="center" class="middle">
          <div align="center">
        <center>
        <!--[if mso]>
        <table style="width: 300px;"><tr><td>
        <![endif]-->
                <table border="0" cellpadding="0" cellspacing="0" align="left" width="45%" height="158" bgcolor="#006699"><tr>
<td style="padding: 0;" align="left" class="responsive-image middle">
                      <img src="http://www.eruditus.com/emailer/0418_responsive_columbia/bg.jpg" style="display: block; margin: 0; padding: 0;">
</td>
                  </tr></table>
  <table border="0" cellpadding="0" cellspacing="0" align="left" width="45%" bgcolor="#0093d4" height="158px"><tr>
<td width="" style="padding: 0 0 0 0; background-color: #0093d4; vertical-align: top;" bgcolor="#0093d4" valign="top">
                            <table border="0" cellpadding="0" cellspacing="0" bgcolor="#0093d4">
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 5px 0 0;" bgcolor="#0093d4" valign="top">&nbsp;</td>
                                  <td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0;" bgcolor="#0093d4" valign="top">&nbsp;</td>
                                </tr>
<tr>
<td width="56" style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 5px 0 0 10px;" bgcolor="#0093d4" valign="top">Email: </td>
                                    <td width="273" style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0;" bgcolor="#0093d4" valign="top"><a href="mailto:epm_columbia@eruditus.com" style="color: #fff; text-decoration: none; font-size: 12px; display: block; padding: 5px 0 0;">EPM_columbia@eruditus.com</a></td>
                                </tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0 0 0 10px;" bgcolor="#0093d4" valign="top">Phone: </td>
                                    <td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0px; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+91 22 6162 3112(India)</span></td>
                                </tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top">&nbsp;</td>
                                    <td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+971 044302011(Dubai)</span></td>
                                </tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top">&nbsp;</td>
                                    <td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+1 862 252 5823(USA)</span></td>
                                </tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top">&nbsp;</td>
                                  <td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top">&nbsp;</td>
                                </tr>


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

</center>
</div>
          <table border="0" cellpadding="0" cellspacing="0" align="center" width="600" class="content" style="border-collapse: collapse; width: 100%; max-width: 600px;">
           <tr><td style="font-size: 0; line-height: 0; font-family:Arial, Helvetica, sans-serif; color: #666666;" height="10"> </td>
            </tr>
          <tr><td style="font-family:Arial, Helvetica, sans-serif; color: #666666; padding: 0;" align="center" class="responsive-image">

                <a href="http://www.eruditus.com/programmes/columbia/columbia-mc.html" style="display: block; margin: 0 auto;" target="_blank">
                <img src="http://www.eruditus.com/emailer/0419_columbia/clickhere.png" align="middle" width="277" height="58" alt="click_program" style="display: block; max-width: none !important; margin: 0 auto;" /></a>
              </td>
            </tr></table></td>
            </tr><tr><td style="font-size: 0; line-height: 0; font-family:Arial, Helvetica, sans-serif; color: #666666;" height="10"> </td>
            </tr></table><!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]--></td>
      </tr>

Answer 1

您要做的是使用媒体查询来检查屏幕尺寸是否小于特定尺寸以显示响应式布局。 e.g：

@media only screen and (max-width: 500px;) {
    //Responsive CSS styling
}

使用此功能，您可以像使用普通网页一样将这些表格置于中心位置。 e.g：

@media only screen and (max-width: 500px;) {
    td[class="responsive-align"] {
        margin: 0 auto !important;
        float: none !important;
        align: center !important; //If this line centers your text, remove it.
    }
}

电子邮件客户端非常迂腐，需要很长时间才能了解您可以对每个人做些什么，以及他们的限制是什么。

根据我对自适应设计和Outlook的体验，您需要像这样布置表格，以便他们有效地下载：

<table align="left">
    <tr>
        <td>
        </td>
    </tr>
</table>
<table align="right">
    <tr>
        <td>
        </td>
    </tr>
</table>

使用Outlook，最好确保两个表之间有5px或更大，以便它可以添加它自己的间距（你不能做任何事情）。因此，对于600px宽度的表格，您的每个表格的宽度都应为295px，以获得足够大的间距。

希望这会有所帮助：）

响应式展望电子邮件不是中心

1 个答案: