HTML电子邮件-表格问题-Outlook 2007/2010/2013
[英]HTML email - issue with tables - Outlook 2007 / 2010 /2013
问题描述
我正在写邮件页脚（签名），除Outlook客户端外，其他地方都可以正常工作！ 我的桌子坏了，我不知道为什么，我在互联网上尝试了很多技巧，但是没有运气，请问有人可以帮忙吗？ 这是我的代码示例：表中嵌套表格的部分存在问题：
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Mail footer</title>
<style type="text/css">
body{margin: 0; font-size: 13px; font-family: Calibri, sans-serif;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
table td { border-collapse:collapse; }
@media only screen and (max-width: 700px) {
body,table,td,p,a,li,blockquote {
-webkit-text-size-adjust:none !important;
}
table {width: 100% !important;}
}
@media only screen and (max-width: 700px) {
.footer table{width: 25% !important;}
}
@media only screen and (max-width: 700px) {
.logo { border: none !important; }
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="logo">
<table cellpadding="0" cellspacing="0" align="left" width="550">
<tr>
<td valign="top">
<div style="font-size: 15px; font-weight: 600;"><b>Xxxxx xxxx</b></br></div>
<div style="font-size: 13px;">
<font color="#008AC9">Managing Director</font></br></br>
</div>
</td>
</tr>
<!-- white space -->
<!--tr><td style="font-size: 0; line-height: 0;" height="15"> </td></tr-->
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" align="left" width="24%" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td class="logo" valign="top" style="font-size: 0; line-height: 0; padding: 1px 8px 0 8px; border-right: 1px solid #485465;" height="55" align="left">
<a href="#"><img src="Logo" alt="logo" height="40" width="90"></a>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="7%" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td valign="top">
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="34%" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td valign="top">
<div style="font-size: 12px; color: #666666;">
Xxxxxx xxxxx<br />
Xxxxxxx x x xxxx<br />
Xxxxxxx xxxxxxxxx<br />
Xxxxxx
</div>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="34%" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td valign="top">
<div style="font-size: 12px; color: #666666;">
<a href="" style="color:#666666; text-decoration:none;"><span style="color:#666666; text-decoration:none;">Direct: XXXXXXXX<br /></span></a>
<a href="" style="color:#666666; text-decoration:none;">Office: XXXXXXXX<br /></span></a>
<a href="mailto:xxx@xxx" style="color:#666666; text-decoration:none;">XXXX@XXXX.com<br /></span></a>
www.XXXXXX.com
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- LOGAAAAAAAAAAAAAAA ############################ -->
<tr><td valign="top" style="font-size: 0; line-height: 0;" height="3" > </td></tr>
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" align="left" width="63.5%">
<tr>
<td valign="top" class="logo" style="line-height: 0; padding: 1px 8px 0 8px;" height="15px" align="left">
</td>
</tr>
</table>
<table class="footer" border="0" cellpadding="0" cellspacing="0" align="left" width="30%">
<tr>
<td valign="top" class="logo" style=" padding: 1px 0px 0 8px;" height="15px" align="left">
<table border="0" cellpadding="0" cellspacing="0" align="left" width="20%">
<tr>
<td valign="top" style="display:block;font-size: 0; line-height: 0; padding: 0 8px 0 8px;" height="8px" align="center" class="responsive-image">
<a href="#"><img src="Test" alt="Facebook" height="8px" width="8px"></a>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="20%">
<tr>
<td valign="top" style="display:block;font-size: 0; line-height: 0; padding: 0 8px 0 8px;" height="8px" align="center" class="responsive-image">
<a href="#"><img src="Test2" alt="Linkedin" height="8px" width="8px"></a>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="20%">
<tr>
<td valign="top" style="display:block;font-size: 0; line-height: 0; padding: 0 8px 0 8px;" height="8px" align="center" class="responsive-image">
</td>
<a href="#"><img src="Test3" alt="Twitter" height="8px" width="8px"></a>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="20%">
<tr>
<td valign="top" style="display:block;font-size: 0; line-height: 0; padding: 0 8px 0 8px;" height="8px" align="center" class="responsive-image">
<a href="#"><img src="Test4" alt="Google Plus" height="8px" width="8px"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="6.5%">
<tr>
<td valign="top" class="logo" style=" line-height: 0; padding: 1px 8px 0 8px;" height="15px" align="left">
</td>
</tr>
</table>
</td>
</tr>
<tr><td valign="top" style="font-size: 0; line-height: 0;" height="10" width="550"> </td></tr>
<tr><td valign="top" style="border-bottom: dotted 1px #bbbbbb; font-size: 0; line-height: 0;" height="1"> </td></tr>
<tr style="text-align: justify;">
<td valign="top">
<div style="font-size: 10px; color: #909090;">
</br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</td>
</tr>
<tr><td valign="top" style="font-size: 0; line-height: 0;" height="10" > </td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
1 个解决方案
解决方案1
0 2015-07-20 15:09:05
我猜问题是表格逐渐堆叠到下一行。 这是因为Outlook在对齐表之间增加了间距。 通常最好在每个表之间留出10-20px的宽度间隙，以允许Outlook随机添加宽度。
如果不使用间隙，则您的另一个选择是使用TD而不是表。 这将删除某些客户端（尤其是Android本机客户端 ）中的响应能力。
如果您需要保留响应性，可以通过用TH标签替换TD来消除android客户端中的问题，并允许您在移动设备上堆叠列。
如何在Outlook 2007、2010和2013的HTML电子邮件中创建填充？
[英]How to create padding in html email for Outlook 2007, 2010 & 2013?
如何在 html 电子邮件中的 Outlook 2007、2010、2013 上使用不显示
[英]How to use display none on outlook 2007, 2010, 2013 in html email
TD和电子邮件中图像之间的差距-Outlook 2007、2008、2010、2013
[英]Gap Between TDs and Images in Email - Outlook 2007, 2008, 2010, 2013
Outlook 2007、2010和2013中的响应2列到1列电子邮件
[英]Responsive 2 column to 1 column email in Outlook 2007, 2010, and 2013
HTML email 中 Outlook（2007 年和 2010 年）中表中 TD 元素下方的空格不一致
[英]Inconsistent spaces below TD elements in tables in HTML email in Outlook (2007 and 2010)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Outlook 2007/2010/2013电子邮件显示问题
如何在Outlook 2007、2010和2013的HTML电子邮件中创建填充？
如何在 html 电子邮件中的 Outlook 2007、2010、2013 上使用不显示
两个HTML电子邮件表之间的空间Outlook 2007、2013
HTML电子邮件通讯-Outlook 2007/2010中的间隔
TD和电子邮件中图像之间的差距-Outlook 2007、2008、2010、2013
Outlook 2007、2010和2013中的响应2列到1列电子邮件
HTML email 中 Outlook（2007 年和 2010 年）中表中 TD 元素下方的空格不一致
Outlook 2010和Outlook 2013的电子邮件HTML模板
HTML电子邮件中的可折叠表（Outlook 2007-2010）
相关标签