代码之家 › 专栏 › 技术社区 › Adam

Outlook:表格左对齐问题

html-email outlook html-table css

Adam · 技术社区 · 7 年前

这就是它在除Outlook之外的所有地方的外观:

在Outlook中,它看起来像:

三个表用于创建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 -->

1 回复 | 直到 7 年前

gj-wes 7 年前

回答你关于间隔的后续问题。只是使用 padding td ,填充是很好的支持,将工作良好。

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

还有一个小提示:你不需要再为css使用属性css选择器了。那是一个老毛病,现在已经修好了。所以你可以自由使用标准 .class