css - 如何让 Outlook 正确显示我的表格

Question

这是我的代码在浏览器中的样子，也是我希望它看起来的样子:

这是在 Outlook 中查看时发生的情况；橙色横幅在上面的表格中，但与下面的表格具有相同的宽度，但它向外拉伸(stretch)了宽度:

HTML:

<table width="700" border="0" cellspacing="0">
<tr>
<th width="60" height="290" rowspan="6" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
<th height="64" align="left" valign="bottom" bgcolor="#FFFFFF" scope="row"><h1><img src="header.png" width="16" height="30" align="bottom" />Service Desk</h1></th>
<th width="21" rowspan="7" align="center" valign="bottom" bgcolor="#FFFFFF" scope="row" ><img id="dot" src="dot.png" width="1" height="1" /></th>
<th width="9"  align="left" valign="bottom" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
<th width="276"  align="left" valign="bottom" bgcolor="#FFFFFF" scope="row"><h1><img src="header.png" alt="" width="16" height="30" align="bottom" />Our Work</h1></th>
<th width="55" rowspan="6" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
</tr>
<tr>
<th width="267" height="114" align="left" valign="baseline" bgcolor="#FFFFFF"  scope="row">Id harum virtute usu, laudem facilis usu ea, graece lucilius dissentiet quo at. Verear fabulas te quo, sed ea torquatos gloriatur, melius verterem partiendo mei ut. Has ei decore nemore, pericula salutandi eu per, tamquam laoreet an sed. Vero illum perpetua ut pro.</th>
<th colspan="2" align="left" valign="baseline" bgcolor="#FFFFFF" style="padding:10px" scope="row">Id harum virtute usu, laudem facilis usu ea, graece lucilius dissentiet quo at. Verear fabulas te quo, sed ea torquatos gloriatur, melius verterem partiendo mei ut. Has ei decore nemore, pericula salutandi eu per, tamquam laoreet an sed. Vero illum perpetua ut pro.</th>
</tr>
<tr>
<th height="38" align="left" valign="bottom" bgcolor="#FFFFFF" scope="row"><h1><img src="header.png" alt="" width="16" height="30" align="bottom" />Engineer Resources</h1></th>
<th colspan="2" rowspan="4" align="center" valign="middle" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
</tr>
<tr>
<th height="105" align="left" valign="top" bgcolor="#FFFFFF" scope="row">Id harum virtute usu, laudem facilis usu ea, graece lucilius dissentiet quo at. Verear fabulas te quo, sed ea torquatos gloriatur, melius verterem partiendo mei ut. Has ei decore nemore, pericula salutandi eu per, tamquam laoreet an sed. Vero illum perpetua ut pro.</th>
</tr>
<tr>
<th height="38" align="left" valign="baseline" bgcolor="#FFFFFF"  scope="row"><h1><img src="header.png" alt="" width="16" height="30" align="bottom" />ecare plus</h1></th>
</tr>
<tr>
<th rowspan="2" align="left" valign="top" bgcolor="#FFFFFF"  scope="row">Id harum virtute usu, laudem facilis usu ea, graece lucilius dissentiet quo at. Verear fabulas te quo, sed ea torquatos gloriatur, melius verterem partiendo mei ut. Has ei decore nemore, pericula salutandi eu per, tamquam laoreet an sed. Vero illum perpetua ut pro.</th>
</tr>
<tr>
<th height="66" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
<th bgcolor="#FFFFFF" scope="row"#FFFFFF>&nbsp;</th>
<th align="left" valign="top" bgcolor="#FFFFFF" scope="row"#FFFFFF>Id harum virtute usu, laudem facilis usu ea, graece lucilius dissentiet quo at. Verear fabulas te quo, sed ea torquatos gloriatur, melius verterem partiendo mei ut.</th>
<th bgcolor="#FFFFFF" scope="row"#FFFFFF>&nbsp;</th>
</tr>
<tr>
<th height="38" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
<th height="38" colspan="4" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
<th bgcolor="#FFFFFF" scope="row"#FFFFFF>&nbsp;</th>
</tr>
<tr>
<th height="16" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
<th height="16" colspan="4" bgcolor="#FFFFFF" scope="row">Weblinks...</th>
<th bgcolor="#FFFFFF" scope="row"#FFFFFF>&nbsp;</th>
</tr>
<tr>
<th height="16" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
<th height="16" colspan="4" bgcolor="#FFFFFF" scope="row">&nbsp;</th>
<th bgcolor="#FFFFFF" scope="row"#FFFFFF>&nbsp;</th>
</tr>

<tr>
<th height="26" colspan="6" bgcolor="#E9E9E9" scope="row"><h6>Copyright © 2013</h6></th>
</tr>
<tr>
<th height="4" colspan="6" bgcolor="#FFFFFF" scope="row"></th>
</tr>
</table>

CSS:

body,td,th {
font-size:12px;
font-weight:normal;
font-family: Arial, Helvetica, sans-serif;
}
body {
margin-left: 0px;
margin-top: 0px;
margin:0;
padding:0;
background-color: #F5F5F5;
}


h1 {
font-family:"Arial Narrow", Helvetica, sans-serif;
font-size: 25px;
color: #666666;
text-transform:uppercase;
font-weight:normal;

}

h2 {
font-size: 16px;
color: #666666;
}

h6 {
font-size: x-small;
color: #333333;
font-weight:normal;
margin:0;
padding:0;
}

#dot {
height:520px;
}

Answer 1

已修复! (有点儿)。我在文本的两边插入了一个透明图像，它阻止了表格向外挤压。这不是最优雅的解决方案，但它是目前可以使用的快速解决方案。