Outlook:表格左对齐问题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Outlook:表格左对齐问题相关的知识,希望对你有一定的参考价值。
除了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 -->
但我不明白为什么。如何更换垫片以使其在Outlook中工作但保留空间?
答案
回答你关于间距的后续问题。只需在padding
上使用td
,填充得到很好的支持,并且可以正常工作。
<table class="table600" width="600">
<tr>
<td style="padding-bottom: 30px;">
然后,您还可以使用媒体查询中的类调整该填充。
另外一个注意事项:您不再需要为css使用属性css选择器。这是一个现在已修复的旧bug。所以你可以自由使用标准的.class
选择器。
以上是关于Outlook:表格左对齐问题的主要内容,如果未能解决你的问题,请参考以下文章