Outlook 2010 表格间距异常
在编写 HTML 电子邮件通讯时，Outlook 2010 出现问题。 （惊喜）
以下截图是结果： http://screencast.com/t/PSZqP7wg 此屏幕截图显示了发生的情况（相同，但图像已关闭）：http://screencast.com/t/DrbexyHnytJ
显然，中间的白柱变窄了。应该是 604px 宽，但是少了很多。 Outlook 似乎在间隔图像旁边放置了额外的填充。
任何人都知道为什么会发生这种情况？
这是 body 标签中的来源：
<table width="761" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" height="151" style="height: 151px;" style="padding: 0px;"><img width="761" height="151" src="http://www.bothino.be/newsletter/top.jpg" alt="" /></td>
</tr>
<tr>
<td width="77" style="width: 77px;">
<img src="http://www.bothino.be/newsletter/spacer.jpg" width="77" alt="" />
</td>
<td width="604" bgcolor="ffffff">
test sdlkfjhklsdjfhqsdklfh qklsdfh klqsjf lqksjdf lkqsjdhf lkdflkqshdfkl jqhsdlkfj
hqslkdfh qlksjdfh lqskjdhf lkqjshdlfk jqhsldkfh qlsdjfh lqksjdflk qsdflkqshdklfh
klqshdf kqshdklf hqskldfqklsd
</td>
<td width="76" style="width: 76px;"><img src="http://www.bothino.be/newsletter/spacer.jpg" width="76" alt="" /></td>
</tr>
<tr>
<td height="151" colspan="3">
<img width="761" height="151" src="http://www.bothino.be/newsletter/bottom.jpg" alt="" />
</td>
</tr>
</table>
When coding a HTML email newsletter Outlook 2010 is acting up. (surprise surprise)
The following screenshot is the result: http://screencast.com/t/PSZqP7wg
This screenshot shows what's happening (same, but images turned off): http://screencast.com/t/DrbexyHnytJ
Obviously, the middle white column is to narrow. Should be 604px wide, but is a lot less. It seems Outlook is placing extra padding next to the spacer images.
Anyone has an idea why this is happening?
This is the source in the body tag:
<table width="761" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" height="151" style="height: 151px;" style="padding: 0px;"><img width="761" height="151" src="http://www.bothino.be/newsletter/top.jpg" alt="" /></td>
</tr>
<tr>
<td width="77" style="width: 77px;">
<img src="http://www.bothino.be/newsletter/spacer.jpg" width="77" alt="" />
</td>
<td width="604" bgcolor="ffffff">
test sdlkfjhklsdjfhqsdklfh qklsdfh klqsjf lqksjdf lkqsjdhf lkdflkqshdfkl jqhsdlkfj
hqslkdfh qlksjdfh lqskjdhf lkqjshdlfk jqhsldkfh qlsdjfh lqksjdflk qsdflkqshdklfh
klqshdf kqshdklf hqskldfqklsd
</td>
<td width="76" style="width: 76px;"><img src="http://www.bothino.be/newsletter/spacer.jpg" width="76" alt="" /></td>
</tr>
<tr>
<td height="151" colspan="3">
<img width="761" height="151" src="http://www.bothino.be/newsletter/bottom.jpg" alt="" />
</td>
</tr>
</table>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您只需为两个标签添加背景颜色即可。宽度显示正确。
You just need to add a background color to both tags. the widths are displaying correctly.
我习惯了 IE 和 Outlook 中的“未定义”空格和换行符问题。它们通常被解释为真实的、想要的空间，按照最近的父级（如果有）的风格进行格式化。
这就是为什么我更喜欢这样编写 htm：
标签内的换行符在显示时不会产生任何影响......但对代码应用类似的结构。
重要的部分是 TD 和 IMAGE 标记之间没有空格。
也许，这并不能解释和解决屏幕截图中的巨大缩进。
I'm used to issues with "undefined" blank spaces and line breaks in IE and Outlook. They are usually interpreted as a real, wanted space, formatted by style of the nearest parent (if any).
That's why i prefer writing htm like this:
Line breaks inside a tag will make no difference at display time ... but apply a similar structure to the code.
The important part is no blank between TD and IMAGE tag.
Maybe, this doesn't explain and solve that huge indentions in your screenshot.
我对 Outlook 的经验是永远永远永远永远不要使用 rowspan 和 colspan 属性。这肯定会引起麻烦。如果表格单元格需要与其上方/下方的布局/宽度不同的布局/宽度，请使用正确的布局将另一个表格单元格嵌套到其中。这样整体的基本网格就保持完整。不太好，但话又说回来：前景很肮脏，你也会（必须）。所有表格都需要有 cellpaddign=0 和 cellspacing=0。这有助于我克服类似的问题。
my experience with Outlook is to never ever never ever use the rowspan and colspan attributes. This is guaranteed to cause trouble. Should a table cell require a different layout/width than the one above/below it, nest another right into it with the correct layout. this way the overall basic grid stays intact. Not nice, but then again: outlook plays dirty and so will you (have to). All tables need to have cellpaddign=0 and cellspacing=0. This helps me to get over similar issues.
有时最好省略
td的宽度，例如省略width=77以及所有 td 的其余宽度。这样它就可以自动扩展以填充整行。或者您也可以在该 tr 中包含一个表。sometimes it's better to leave out width for
td's eg leave outwidth=77and rest of width for all td's. that way it can expand automatically to fill the entire row. or you can also include a table withing that tr.