Outlook 2010 和 HTML 表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5540069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Outlook 2010 and HTML Tables
提问by cooolpix
I am just creating some email newsletter, and I cannot figure out how force outlook to display my HTML table corectly.
我只是在创建一些电子邮件通讯，我无法弄清楚如何强制 Outlook 正确显示我的 HTML 表。
There is simple example:
有一个简单的例子：
<table cellpadding="0" cellspacing="0" id="outlookHack"
style="table-layout:fixed; border: 0; background-color: #1E6C9D;
background-image: url(http://www.komix.cz/upload/img_bg.png);
background-repeat: repeat-y; margin-top: 0px; margin-bottom: 0px;
padding: 0px; margin-left: auto; margin-right: auto;
text-align: center;width: 620px;" width="620">
<tr>
<td width="10" style="width: 10px; background:inherit;" height="10"> </td>
<td width="600" style="width: 600px; background:ihnerit;" height="10"></td>
<td width="10" style="width: 10px; background:inherit;" height="10"> </td>
<tr>
<tr>
<td width="10" style="width: 10px; background: inherit;"> </td>
<td width="600" style="width: 600px; background: white;">some content...</td>
<td width="10" style="width: 10px; background: inherit;"> </td>
<tr>
</table>
The problem is, that left and right columns should have fixed size of 10px, but outlook 07/10 renders them as +/- 5px.
问题是，左栏和右栏的固定大小应该为 10 像素，但 Outlook 07/10 将它们呈现为 +/- 5 像素。
回答by bpeterson76
KISS -- Keep it simple (stupid)
KISS——保持简单（愚蠢）
Outlook 07-present uses Word's rendering engine, which is basically IE (which is dumb) further dumbed down. It forces you to code back to html 1 standards, and really limits what you can do. For starters, basically give up on complex CSS. It can be used (in-line) but much of it doesn't work. See this document on compatibility
Outlook 07-present 使用 Word 的渲染引擎，它基本上是 IE（这是愚蠢的）进一步简化的。它迫使您重新编码到 html 1 标准，并真正限制了您的能力。对于初学者，基本上放弃复杂的 CSS。它可以（在线）使用，但其中大部分不起作用。有关兼容性，请参阅此文档
So, using the compatibility chart, background support is almost non-existent....lose it. Background repeats are unsupported, and padding isn't really very well supported either.
所以，使用兼容性图表，后台支持几乎不存在......失去它。不支持背景重复，并且填充也没有得到很好的支持。
Now, how to solve your padding problem? You could use cellpadding to add space, but that sometimes has undesirable effects on areas you don't want padded. Some people use nested tables to provide the necessary padding, using the outer to control the page layout and the inner table(s) to control the paragraph. Note that margins are also supported according to the doc, so you could use margins on paragraphs, ditching the 10 pixel left and right columns in favor of a paragraph with 10 pixel margins.
现在，如何解决您的填充问题？您可以使用 cellpadding 来添加空间，但这有时会对您不想填充的区域产生不良影响。有些人使用嵌套表格来提供必要的填充，使用外部表格来控制页面布局，使用内部表格来控制段落。请注意，根据文档，边距也受支持，因此您可以在段落上使用边距，抛弃 10 像素左右列，转而支持具有 10 像素边距的段落。
Also, note that you should avoid any shorthand CSS, i.e. border:1px solid #000
另外，请注意，您应该避免使用任何速记 CSS，即 border:1px solid #000
Thanks, Microsoft. While you're driving us UI Developers crazy with your regressing rendering engine quality and general avoidance of basic standards, you're also making us a lot of extra money.
谢谢，微软。当您因渲染引擎质量的下降和基本标准的普遍回避而让我们的 UI 开发人员发疯的同时，您也为我们赚了很多额外的钱。
