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）
相關標簽