7

首先：
我讨厌 Outlook :)

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

<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>

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

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

  • cellpadding = 0，cellspacing = 0，border = 0 on table
  • 使用内联 css 设置每个 td 的宽度
  • 添加边框折叠：折叠到所有 tds 和表格
  • 添加边距：0，填充：0；边框 0; 到内联 css 中的所有 tds
  • 在 inline css 中将字体大小和行高设置为 0

没有任何效果。

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

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

4

5 回答 5

3

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

最新编辑：试试这个——

<tr> <td style="border-collapse: collapse; margin:0;padding:0; 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: 0px;line-height: 0px; font-size: 0px; border-collapse: collapse;padding:0;margin:0;border:0" width="0"></td> <td style="width: 0px;line-height: 0px; font-size: 0px; border-collapse: collapse;padding:0;margin:0;border:0" width="0"></td> <td style="border-collapse: collapse; margin:0;padding:0; border:0" align="left" ><img src="http://lorempixel.com/200/200/" style="display:block;margin:0;padding:0; border:0" border="0"></td></tr>

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

于 2012-09-13T14:58:12.667 回答
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] 列周围的注释就足够了。但是，您可能还想隐藏在 outlook.com、gmail.com 和其他一些网站中 - 为此包括其他样式。不要忘记使用媒体查询恢复移动视图中的设置。

祝奥列格好运

于 2015-02-09T09:51:30.507 回答
1

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

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

<td>Foo
</td><td>
Bar</td>
于 2012-09-12T08:59:56.983 回答
0

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

于 2012-10-06T15:57:33.720 回答
0

“显示：无”有帮助吗？

<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 上没有遇到您的问题，所以我无法验证它。

于 2012-09-20T20:58:34.767 回答