在 Outlook 中呈现零宽度表格单元格答案

【问题标题】：Rendering of zero width table cells in Outlook在 Outlook 中呈现零宽度表格单元格
【发布时间】：2012-09-12 08:57:32
【问题描述】：

首先：
我讨厌 Outlook :)

原因如下：
我正在尝试发送具有以下结构的电子邮件（这只是一个简化的示例，所以请不要告诉我“只需摆脱中间的tds”）

<table width="400">
  <tbody>
    <tr>
       <td width="200"><img src="http://lorempixel.com/200/200/"></td>
       <td width="0"></td>
       <td width="0"></td>
       <td width="200"><img src="http://lorempixel.com/200/200/"></td>
    </tr>
  </tbody>
</table>

问题是，中间的两个tds 导致两张图片之间有一个空格，如您在此屏幕截图中看到的http://i48.tinypic.com/6i8rvk.png

我觉得我已经尝试了所有可能的方法。

cellpadding = 0，cellspacing = 0，border = 0 on table
使用内联 css 设置每个 td 的宽度
添加边框折叠：折叠到所有 tds 和表格
添加边距：0，填充：0；边框 0;到内联 css 中的所有 tds
在内联 css 中将 font-size 和 line-height 设置为 0

没有任何效果。

旁注：
如果中间只有一个空的表格单元格，则渲染是可以的。所以好像每个td只占半个像素
这已经是一个简化的示例，我无法更改表格的结构，这意味着我必须找到解决呈现问题的解决方法，而不是修复相当不美观的编码风格。

测试
这是我的测试环境 - 随意使用它：http://putsmail.com/d58ffa01c4b3e29123baab00754716

【问题讨论】：

标签： email outlook html-email outlook-2010 email-client

【解决方案1】：

尝试将 padding-left 和/或 padding-right 放在包含图像的 tds 中，作为内联 css。

最新编辑：试试这个 --

我从包含图像的 tds 中删除了宽度，因此它采用图像的默认宽度。

【讨论】：

我已经这样做了 - putsmail.com/d58ffa01c4b3e29123baab00754716 它不起作用。
我在您的测试环境中将 padding-right:10px 放在第一个 <td> 中，它看起来不错。它在 Outlook 上不起作用吗？
我在 Outlook 2003、2007 和 2010 中测试了上述内容，看起来都不错。我使用 getResponse.com 来测试不同的电子邮件客户端，它是免费的 :)
你能发布有效的源代码吗？我想对其进行测试并在我的 Outlook 安装中看到它的实际效果:)
<tr> <td style="width: 200px; border-collapse: collapse; margin:0;padding-right:10px; border:0" align="right" width="200"><img src="http://lorempixel.com/200/200/" style="display:block;margin:0;padding:0; border:0" border="0"></td> <td style="width: 200px; border-collapse: collapse; margin:0;padding:0; border:0" align="left" width="200"><img src="http://lorempixel.com/200/200/" style="display:block;margin:0;padding:0; border:0" border="0"></td></tr>

【解决方案2】：

Outlook 不喜欢隐藏内容 ;-) 但是应该做什么 - 添加一些条件代码：

              <table border="0" cellpadding="0" cellspacing="0" style="width:100%;table-layout:fixed">
                <tr>
                  <td style="width:217px" valign="top">
                    column 1
                  </td>
                  <!--[if !mso]><!--><td style="line-height:0;max-height:0;width:0;overflow:hidden;font-size:0;display:none" valign="top">
                    hidden column 2
                  </td>
                  <!--<![endif]--><td valign="top">
                    column 3
                  </td>
                </tr>
              </table>

要从 Outlook 中隐藏它，带有 [!mso / endif] 的列周围的 cmets 就足够了。但是，您可能还想隐藏在 outlook.com、gmail.com 和其他一些网站中 - 为此包括其他样式。不要忘记使用媒体查询恢复移动视图中的设置。

祝你好运奥列格

【讨论】：

【解决方案3】：

您是否尝试过将<td>s 放在同一行？也就是去掉元素之间的换行符？

（内部元素换行符被忽略）

<td>Foo
</td><td>
Bar</td>

【讨论】：

【解决方案4】：

“显示：无”有帮助吗？

<table width="400">
  <tbody>
    <tr>
       <td width="200"><img src="http://lorempixel.com/200/200/"></td>
       <td width="0" style="display:none"></td>
       <td width="0" style="display:none"></td>
       <td width="200"><img src="http://lorempixel.com/200/200/"></td>
    </tr>
  </tbody>
</table>

顺便说一句，我在 Outlook 2003 上没有遇到您的问题，所以我无法验证它。

【讨论】：

呃...谢谢你的赏金无论如何我猜。这是否意味着它解决了 Outlook 2003 上的任何问题？您是否尝试过将此与 coder1984 的 2007/2010 年解决方案结合起来？

【解决方案5】：

我一直在尝试解决这个问题 - 什么都没有（我已经尝试过这里的每一个建议以及更多）。
最后，我采用了更困难但也是我认为最干净的方式，并编写了一个脚本，通过 xsl 转换删除所有空列和所有空行。现在它适用于 Outlook 2003 - 2010。

【讨论】：