Outlook 2007/2010 中浮动表格之间的水平差距答案

【问题标题】：Horizontal gap between floated tables in Outlook 2007/2010Outlook 2007/2010 中浮动表格之间的水平差距
【发布时间】：2012-06-11 07:19:06
【问题描述】：

我已经花了两个星期来寻找任何解决方案，但无法找到。如果您在每个表格之后浮动表格，则在 Microsoft Outlook 2007/2010 中会有一个像素的间隙，它使用 Microsoft Word 2007 HTML 渲染引擎：

感谢您提供任何可行的解决方案 - 不要将表格放在单独的 <td>'s。

这里是重现它的 HTML 代码：

<html>
    <head>
    <title>Outlook 2007/2010 horizontal gap</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
        table { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    </style>
</head>
<body bgcolor="#000000">
    <table bgcolor="#ffff00" align="left"><tr><td>&nbsp;</td></tr></table>
    <table bgcolor="#ffff00" align="left"><tr><td>&nbsp;</td></tr></table>
</body>
</html>

到目前为止我所做的尝试：

display: inline-table; 而不是 align="left"
搜索了其他相关的mso- CSS 属性，但没有成功
删除了<table> 元素之间的空格
border-collapse: collapse 和 border-spacing: 0
添加border: 1px solid red; 将消除间隙但会增加表格的宽度
其他display's、padding 和margin
<td> 和/或 <table> 上的不相关或已弃用的 html 属性（rules、frame、border 等）

趣味因素：

如果将这两个表格放在一个表格中，额外的间隙宽度将增加到 2 个像素。

【问题讨论】：

标签： html-table css-float html-email outlook-2010 outlook-2007

【解决方案1】：

这是一个如何浮动表格的示例。您需要结合使用border="1" 和mso-table css 来消除1px 的差距。见例子：

<table bgcolor="#454545" width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td width="5%"></td><td align="center" width="95%">


<div align="left" style="float: left; padding: 0px; margin:0px;">
  <table border="1" bordercolor="#959595" cellpadding="0" cellspacing="0" align="left" style="padding: 0px; margin:0px; mso-table-lspace: -1pt; mso-table-rspace: -1pt; ">
    <tr>
      <td width="318" bgcolor="959595">table 1

      </td>
    </tr>
  </table>
</div>
<div align="left" style="float: left; padding: 0px; margin:0px;">
  <table border="1" bordercolor="#959595" cellpadding="0" cellspacing="0" align="left" style="padding: 0px; margin:0px; mso-table-lspace:-1pt; mso-table-rspace: -1pt; ">
    <tr>
      <td width="318" bgcolor="959595">table 2

      </td>
    </tr>
  </table>
</div>


</td></tr></table>

【讨论】：

【解决方案2】：

尝试在两个表格的每一个上使用表格边框 =“0”单元格空间 =“0”单元格填充 =“0”。如果我理解你的问题是正确的，这应该可以解决它:)

【讨论】：

不，这对解决问题没有帮助。间隙在表格的边框之间，即使这些值为 0。

【解决方案3】：

我们在这里可能是 SOL。我还在研究与 Outlook 2007/10 兼容的电子邮件格式。如果我的读数是正确的，Outlook 2007/10/13 不支持 border-spacing 用于表格，这可能是导致您出现间距问题的原因。

参考：
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Guide to CSS support in email | Campaign Monitor

【讨论】：