这是我的代码在浏览器中的样子,以及我希望它看起来如何:
这是在Outlook中查看时发生的情况;橙色横幅位于上方的桌子中,但宽度与下表相同,但它向外拉伸宽度:
HTML:
<table width="700" border="0" cellspacing="0">
<tr>
<th width="60" height="290" rowspan="6" bgcolor="#FFFFFF" scope="row"> </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"> </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"> </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"> </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"> </th>
<th bgcolor="#FFFFFF" scope="row"#FFFFFF> </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> </th>
</tr>
<tr>
<th height="38" bgcolor="#FFFFFF" scope="row"> </th>
<th height="38" colspan="4" bgcolor="#FFFFFF" scope="row"> </th>
<th bgcolor="#FFFFFF" scope="row"#FFFFFF> </th>
</tr>
<tr>
<th height="16" bgcolor="#FFFFFF" scope="row"> </th>
<th height="16" colspan="4" bgcolor="#FFFFFF" scope="row">Weblinks...</th>
<th bgcolor="#FFFFFF" scope="row"#FFFFFF> </th>
</tr>
<tr>
<th height="16" bgcolor="#FFFFFF" scope="row"> </th>
<th height="16" colspan="4" bgcolor="#FFFFFF" scope="row"> </th>
<th bgcolor="#FFFFFF" scope="row"#FFFFFF> </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;
}
答案 0 :(得分:0)
固定! (的种类)。我在文本的任一侧插入了一个透明图像,它阻止了表格向外强制。不是最优雅的解决方案,但它是一个快速解决方案,现在可以做。