Question

在Outlook中测试此电子邮件时（双击以完全打开电子邮件之前），底部的取消订阅文本末尾会显示空白/缺少的td。 TD应该填写100％。我尝试使用colspan =“2”和3，但仍然是相同的结果。

在浏览器上，它总是很好看。有明显的迹象吗？

屏幕截图预览： enter image description here

JSFiddle中的代码 - http://jsfiddle.net/6jp7xudd/（虽然如上所述，在浏览器中它看起来很好。只有当你在outlook中看到它的预览时才会发生这种情况。）

<!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="Content-Type" content="text/html; charset=UTF-8" />
  <title>Demystifying Email Design</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <style>
    h3 { font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-size: 30px; color: #ffffff; }
    td { color: #ffffff; font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-size: 15px; }
    a { text-decoration: none; color: #00a950; }
  </style>
</head>

<body style="margin: 0; padding: 0;">
<table align="center" cellpadding="0" cellspacing="0" width="800" bgcolor="#004964"  style="border:none;">
 <tr>
    <td height="456" vertical-align="top" valign="top">
     <img src="http://www.example.co.uk/example/14-12-14/main-img.jpg" alt="Merry Christmas from Wyles Hardy" width="800" height="454" style="display: block;" />
    </td>
 </tr>
 <tr>
  <td bgcolor="#004964" style="border:#004964;">
   <img src="http://www.example.co.uk/example/14-12-14/hr.jpg" alt="Merry Christmas from Wyles Hardy" width="800" height="15" style="display: block;" />
  </td>
 </tr>
 </table>
    <table align="center" cellpadding="0" cellspacing="0" width="800" bgcolor="#004964"  style="border:none;">
     <tr>
        <td width="306" style="padding: 0 20px 0 20px;">
            <img src="http://www.example.co.uk/example/14-12-14/logo.jpg" alt="Wyles Hardy Logo" />
        </td>
        <td width="247">
            Wyles Hardy &amp; Co Ltd,<br>Ley hill Road, Bovingdon,<br>Hemel Hempstead<br>Hertfordshire,HP3 0NW
        </td>
        <td width="247">
            <br>
            <a href="" style="text-decoration:none;border:none;color:#ffffff;">Tel +44(0)1442 832234</a><br><a href="" style="text-decoration:none;border:none;color:#ffffff;">Fax +44(0)1442 834342</a><br><a href="mailto:enquiries@example.com" style="color:#00a950;">enquiries@example.com</a>
        </td>
     </tr>
    </table>
    <table align="center" cellpadding="0" cellspacing="0" width="800" bgcolor="#004964" style="border:none;">
    <tr>
        <td bgcolor="#004964" style="border:#004964;">
        <img src="http://www.example.co.uk/example/14-12-14/hr.jpg" alt="Merry Christmas from Wyles Hardy" width="800" height="15" style="display: block;" />
        </td>
    </tr>
    </table>
    <table align="center" cellpadding="0" cellspacing="0" width="800" bgcolor="#004964" style="border:none;">
        <tr>
            <td style="text-align: center; font-size: 12px; padding: 5px 0 5px 0;" colspan="2">To unsubscribe from our mailing list or not to receive further emails from us, <unsubscribe><span style="color:#00a950;">click here</span></unsubscribe></td>
        </tr>
    </table>
</body>
</html>

Answer 1

在您的情况下，它肯定不会成为一个colspan问题，因为您要通过Tables而不是行分隔。因此，在您的情况下，每个表中的单元格与任何其他表中的单元格都没有对应关系。

我实际上无法复制您的问题。无论是在我自己的Outlook上，还是在我的Email on Acid测试帐户上。但是我会建议添加一个跨越100％的包装表，然后添加一个align =＆＃34; center＆＃34;到包装表的单元格。然后从内部表中删除对齐。这些表将继承细胞居中，你的电子邮件将更好地发挥这种结构......

＆＃13;

<!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="Content-Type" content="text/html; charset=UTF-8" />
  <title>Demystifying Email Design</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <style>
    h3 { font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-size: 30px; color: #ffffff; }
    td { color: #ffffff; font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-size: 15px; }
    a { text-decoration: none; color: #00a950; }
  </style>
</head>

<body style="margin: 0; padding: 0;">
    <table cellpadding="0" cellspacing="0" width="100%" style="border:none;">
        <tr>
            <td align="center">
                <table cellpadding="0" cellspacing="0" width="800" bgcolor="#004964" style="border:none;">
                    <tr>
                        <td height="456" vertical-align="top" valign="top">
                         <img src="http://www.example.co.uk/example/14-12-14/main-img.jpg" alt="Merry Christmas from Wyles Hardy" width="800" height="454" style="display: block;" />
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#004964" style="border:#004964;">
                        <img src="http://www.example.co.uk/example/14-12-14/hr.jpg" alt="Merry Christmas from Wyles Hardy" width="800" height="15" style="display: block;" />
                        </td>
                    </tr>
                </table>
                <table cellpadding="0" cellspacing="0" width="800" bgcolor="#004964"  style="border:none;">
                 <tr>
                    <td width="306" style="padding: 0 20px 0 20px;">
                        <img src="http://www.example.co.uk/example/14-12-14/logo.jpg" alt="Wyles Hardy Logo" />
                    </td>
                    <td width="247">
                        Wyles Hardy &amp; Co Ltd,<br>Ley hill Road, Bovingdon,<br>Hemel Hempstead<br>Hertfordshire,HP3 0NW
                    </td>
                    <td width="247">
                        <br>
                        <a href="" style="text-decoration:none;border:none;color:#ffffff;">Tel +44(0)1442 832234</a><br><a href="" style="text-decoration:none;border:none;color:#ffffff;">Fax +44(0)1442 834342</a><br><a href="mailto:enquiries@example.com" style="color:#00a950;">enquiries@example.com</a>
                    </td>
                 </tr>
                </table>
                <table cellpadding="0" cellspacing="0" width="800" bgcolor="#004964" style="border:none;">
                <tr>
                    <td bgcolor="#004964" style="border:#004964;">
                    <img src="http://www.example.co.uk/example/14-12-14/hr.jpg" alt="Merry Christmas from Wyles Hardy" width="800" height="15" style="display: block;" />
                    </td>
                </tr>
                </table>
                <table cellpadding="0" cellspacing="0" width="800" bgcolor="#004964" style="border:none;">
                    <tr>
                        <td style="text-align: center; font-size: 12px; padding: 5px 0 5px 0;">To unsubscribe from our mailing list or not to receive further emails from us, <unsubscribe><span style="color:#00a950;">click here</span></unsubscribe></td>
                    </tr>
                </table>
            </td>
         </tr>
     </table>
</body>
</html>

＆＃13;

Answer 2

我找到了解决问题的方法。

2条水平线都位于问题区域上方的表格标签中。所以我把桌子里面的最后一条水平线移到了我遇到问题的地方，所以现在由于水平线图像的大小（800px），这个表现在被强制了100％。

所以现在这是我的最后一个表格标记。

<table align="center" cellpadding="0" cellspacing="0" width="800" bgcolor="#004964" style="border:none;">
    <tr>
        <td bgcolor="#004964" style="border:#004964;">
        <img src="http://www.mangemails.co.uk/wyleshardy/14-12-14/hr.jpg" alt="Merry Christmas from Wyles Hardy" width="800" height="15" style="display: block;" />
        </td>
    </tr>
    <tr>
        <td style="text-align: center; font-size: 12px; padding: 5px 0 5px 0;">To unsubscribe from our mailing list or not to receive further emails from us, <unsubscribe><span style="color:#00a950;">click here</span></unsubscribe></td>
    </tr>
</table>

HTML电子邮件 - 单td全宽太短

2 个答案: