0
Я пишу почтовый подписчик (подпись), везде он отлично работает, за исключением клиента Outlook! мои таблицы сломаны, и я не знаю, почему, я пробовал много трюков в Интернете, но без везения, пожалуйста, может кто-нибудь помочь? Вот пример моего кода: У меня есть проблемы с той частью, где таблица вложена в таблице:HTML-письмо с выпуском таблиц - Outlook 2007/2010/2013
<!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:[email protected]" style="color:#666666; text-decoration:none;">[email protected]<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>
Outlook использует агент преобразования слов html, который вы, вероятно, должны учитывать эквивалент версии интернет-браузера 0,000000000001cocktail. это полное дерьмо. –
Добавить в таблицу style = "border-collapse: collapse;" –