1

这是我的代码在浏览器中的外观,以及我希望它的外观:

在此处输入图像描述

这就是在 Outlook 中查看时发生的情况;橙色横幅位于上方的表格中,但与下方表格的宽度相同,但它向外延伸了宽度:

在此处输入图像描述

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;
}
4

1 回答 1

0

固定的!(有点儿)。我在文本的两侧插入了一个透明图像,它阻止了表格向外强制。不是最优雅的解决方案,但它是现在可以快速解决的问题。

于 2013-08-08T08:51:52.787 回答