OUTLOOK 2013 中 2 个表格之间的 1px 差距答案

【问题标题】：1px gap between 2 tables in OUTLOOK 2013OUTLOOK 2013 中 2 个表格之间的 1px 差距
【发布时间】：2016-01-14 01:01:34
【问题描述】：

我的 HTML 中有 2 个左对齐的表格（用于响应电子邮件 HTML）。 Outlook 仅将它们堆叠为我无法删除的 1 个可悲像素。这两张图片是相同的（出于测试原因）。但是 Outlook 出于某种未知原因在第二个表格的左边框上插入了 1 个像素。

我放弃了！谁能想出如何删除它以使 2 个表适合父表，因此不要从上到下堆叠？

此处的 HTML 代码（我在 Outlook 中附加了收到的电子邮件中的图像，就像在浏览器中一样，表格是正确的）： https://jsfiddle.net/pzamxm9c/#&togetherjs=4x0GFwld1q

<!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=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css">
table {border-collapse: collapse; margin:0;padding:0;mso-table-lspace:0pt; mso-table-rspace:0pt;}
</style>
</head>

<body style="font-size:0px; line-height:0px;">
<table border="0" width="580" cellspacing="0" cellpadding="0" bgcolor="#FFCC00">
 <tr>
 <td align="left">
     <table align="left" width="288" height="329" border="0" cellpadding="0" cellspacing="0">
     <tr>
     <td align="left" bgcolor="#00CC99" style="font-size:1; height:1px;mso-table-lspace:0;mso-table-rspace:0;">
     <p style="mso-table-lspace:0;mso-table-rspace:0;font-size:2px;line-height:2px;">    
     <img align="left" src="http://mail.ventura24.es/dialog/elements/eventlayer_left_2.png" alt="Bote: 47 millones" width="289" style=" border: 0px none;" border="0" />     
     </p>
     </td>
     </tr>
     </table>
     <table align="left" width="288" height="329" border="0" cellpadding="0" cellspacing="0">
     <tr>
     <td align="left" bgcolor="#00CC99" style="font-size:1; height:1px;mso-table-lspace:0;mso-table-rspace:0;">
     <p style="mso-table-lspace:0;mso-table-rspace:0;font-size:2px;line-height:2px;">    
     <img align="left" src="http://mail.ventura24.es/dialog/elements/eventlayer_left_2.png" alt="Bote: 47 millones" width="289" style=" border: 0px none;" border="0" />     
     </p>
     </td>
     </tr>
     </table>
 </td>
 </tr>
 </table>
</body>
</html>

【问题讨论】：

标签： css outlook html-email

【解决方案1】：

您可以使用 Outlook“幻列”来包含并排表格：

<!--[if (gte mso 9)|(IE)]>
    </td><td align="left">
<![endif]-->

这针对除 Outlook.com 之外的所有 Outlook。

【讨论】：

【解决方案2】：

<!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=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css">
table {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
}
</style>
</head>

<body style="font-size:0px; line-height:0px;">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
  <tr>
  <td align="left">
    <table align="left" width="290" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="left" bgcolor="#FFFFFF" style="font-size:1; height:1px;mso-table-lspace:0;mso-table-rspace:0;"><p style="mso-table-lspace:0;mso-table-rspace:0;font-size:0px;line-height:0px;"> <img align="left" src="http://mail.ventura24.es/dialog/elements/eventlayer_left_2.png" alt="Bote: 47 millones" width="290" style=" border: 0px none;" border="0" /> </p></td>
        </tr>
      </table>
    <!--[if gte mso 9]>
    </td>
    <![endif]--> 

    <!--[if gte mso 9]>
    <td align="left">
    <![endif]-->      
    <table align="left" width="290" height="329" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="left" bgcolor="#FFFFFF" style="font-size:1; height:1px;mso-table-lspace:0;mso-table-rspace:0;"><p style="mso-table-lspace:0;mso-table-rspace:0;font-size:0px;line-height:0px;"> <img align="left" src="http://mail.ventura24.es/dialog/elements/eventlayer_left_2.png" alt="Bote: 47 millones" width="290" style=" border: 0px none;" border="0" /> </p></td>
        </tr>
      </table>        
  </td>
  </tr>
</table>
</body>
</html>

【讨论】：

【解决方案3】：

如果 <table> 与另一个 <table> 并排，Outlook 将在 95% 的情况下额外增加 1-2px 的宽度。最好的解决方案是将它们包装在<td>'s 中。

<!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=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css">
body {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
}

@media (max-width: 600px) {
*[class].w320 {
    width: 320px !important;
}
*[class].break {
    display: block !important;
}
*[class].break img {
    width: 100% !important;
    height: auto !important
}
}
</style>
</head>
<body style="font-size:0px; line-height:0px;">
<table border="0" width="580" class="w320" cellspacing="0" cellpadding="0" bgcolor="#FFCC00">
  <tr>
    <td class="break w320">
    <table width="290" class="w320" height="329" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td bgcolor="#00CC99"><img src="http://mail.ventura24.es/dialog/elements/eventlayer_left_2.png" alt="Bote: 47 millones" width="289" border="0" /></td>
        </tr>
      </table>
    </td>
    <td class="break w320">
    <table width="290" class="w320" height="329" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td bgcolor="#00CC99"><img src="http://mail.ventura24.es/dialog/elements/eventlayer_left_2.png" alt="Bote: 47 millones" width="289" border="0"/></td>
        </tr>
    </table>
    </td>
  </tr>
</table>
</body>
</html>

【讨论】：

好点。几乎工作了。用 TD 包装表格完成了这项工作。然而，这阻止了 2 个图像在 Android 和其他设备中从上到下堆叠。 @Rasmus，最后，我在您的答案中添加了条件 cmets 以将每个表包装在 Outlook 中，并将其余设备与两个表作为兄弟姐妹。那成功了。我在下面发布最终代码。非常感谢您的帮助。
很容易让它们在移动设备上堆叠，你只需要一些媒体查询。我会尽快为您添加完整的解决方案:-)

【解决方案4】：

尽量不要在两个表之间留出任何空间：

</table><table align="left" width="288" height="329" border="0" cellpadding="0" cellspacing="0">

或者：

</table><!--
--><table align="left" width="288" height="329" border="0" cellpadding="0" cellspacing="0">

【讨论】：