Outlook:表格左对齐问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Outlook:表格左对齐问题相关的知识,希望对你有一定的参考价值。

除了Outlook之外,这是它在任何地方的外观:

enter image description here

在Outlook中,它看起来像这样:

enter image description here

三个表用于创建2列设计,这是代码:

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.ReadMsgBody {
  width: 100%;
  background-color: #ffffff;
}

.ExternalClass {
  width: 100%;
  background-color: #ffffff;
}

.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
  line-height: 100%;
}

html { width: 100%; }

body {
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  margin: 0;
  padding: 0;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

table td { border-collapse: collapse; }
.yshortcuts a { border-bottom: none !important; }
img { display: block !important; }

a {
  text-decoration: none;
  color: #e54a39;
}


/* Media Queries */

@media only screen and (max-width: 640px) {
  body { width: auto !important; }
  table[class="table600"] { width: 450px !important; }
  table[class="table-container"] { width: 90% !important; }
  
  table[class="container2-2"] {
    width: 47% !important;
    text-align: left !important;
  }
  
  table[class="full-width"] {
    width: 100% !important;
    text-align: center !important;
  }
  
  img[class="img-full"] {
    width: 100% !important;
    height: auto !important;
  }
}

@media only screen and (max-width: 479px) {
  body { width: auto !important; }
  table[class="table600"] { width: 290px !important; }
  table[class="table-container"] { width: 82% !important; }
  
  table[class="container2-2"] {
    width: 100% !important;
    text-align: left !important;
  }
  
  table[class="full-width"] {
    width: 100% !important;
    text-align: center !important;
  }
  
  img[class="img-full"] { width: 100% !important; }
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <title>Test</title>
</head>

<body marginwidth="0" marginheight="0" style="margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;" offset="0" topmargin="0" leftmargin="0">

    <!-- PREFOOTER -->
    <table width="100%">
        <tr>
            <td align="center" bgcolor="orange">
                <table class="table600" width="600">
                    <tr>
                        <td>
                            <table class="full-width" width="287" align="left">
                                <tr>
                                    <td align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                                        Why do I get this mail?
                                    </td>
                                </tr>
                            </table>

                            <!-- SPACE -->
                            <table class="full-width" width="1" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                                <tr>
                                    <td width="1" height="30" style="font-size: 30px; line-height: 30px;"></td>
                                </tr>
                            </table>
                            <!-- END SPACE -->

                            <table class="full-width" width="287" align="right">
                                <tr>
                                    <td align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                                        Contact Us
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <!-- END PREFOOTER -->

</body>

</html>

我已经发现问题是由以下原因引起的:

 <!-- SPACE -->
 <table class="full-width" width="1" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
      <tr>
           <td width="1" height="30" style="font-size: 30px; line-height: 30px;"></td>
      </tr>
 </table>
 <!-- END SPACE -->

但我不明白为什么。如何更换垫片以使其在Outlook中工作但保留空间?

答案

回答你关于间距的后续问题。只需在padding上使用td,填充得到很好的支持,并且可以正常工作。

<table class="table600" width="600">
  <tr>
    <td style="padding-bottom: 30px;">

然后,您还可以使用媒体查询中的类调整该填充。

另外一个注意事项:您不再需要为css使用属性css选择器。这是一个现在已修复的旧bug。所以你可以自由使用标准的.class选择器。

以上是关于Outlook:表格左对齐问题的主要内容,如果未能解决你的问题,请参考以下文章

如何在响应式表格中获得文本左对齐的全宽列

左对齐徽章

我应该如何使用 Outlook 发送代码片段?

如何调整这个固定的表格标题,使其左对齐而不是居中?

按钮不会在所有分辨率上左对齐

表格列 (td) 中的 CSS:向右对齐但向左移动并使用填充