我正在为我的工作地点编写电子邮件，因为我们是企业对企业，所以我面临很大的压力让电子邮件在 Microsoft Outlook 中看起来不错。我最初将其设置为 6 列表(我将第一行分成 6 个空分区并使用 colspan)，但将其减少为 3 列表。我确信我的所有测量结果都是正确的，但 Microsoft Outlook 似乎仍在破坏我的表格。
在 Outlook 中，第 3、4 和 5 行的右侧从第 1 行和第 2 行突出约 100 像素，而第 5 行，我的页脚，白色文本被挤压成看起来像 100 像素宽的部分，并且按钮漂浮在其余空间的中心。
我已经四次检查了我的 colspans 和像素测量值，并用 .jpg 图像替换了我的 hr 标签(但当我发现这没有什么区别时，将它们改回了 hr 标签)，但它仍然提供我 hell 。我一直在寻找这种方式，我一定是一遍又一遍地错过了这个问题。
这是我的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w31.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>2015 Outdoor Room Design Ideas Promo</title>
<style type="text/css">
.ExternalClass * {
width: 100%;
line-height: 100%;
margin: 0 auto;
}
body {
margin: 0 auto !important;
}
table.container {
width: 100% !important;
border-collapse: collapse !important;
mso-table-lspace:0;
mso-table-rspace:0;
table-layout: fixed ;
vertical-align: top !important;
}
table.layout {
width: 600px !important;
}
table.copy {
width: 550px !important;
}
</style>
</head>
<body style="background-color: #d1d1d1; font-family: sans-serif; font-size: 16px;">
<table class="container" cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td align="center">
<table class="layout" cellspacing="0" cellpadding="0" border="0" width="600px">
<tr><td width="200px" height="10px"></td><td width="200px" height="10px"></td><td width="200px" height="10px"></td></tr>
<tr><td colspan="3" width="600px" height="50px">
<img src="http://media.hearthandhome.com/promos/2015_Outdoor_Room/Header.jpg" width="600px" height="50px" alt="Hearth and Home magazine, the voice of the hearth, barbecue, and patio industries" /></td></tr>
<tr><td colspan="3" width="600px" height="5px"></td></tr>
<tr><td colspan="3" width="600px" height="347px">
<img src="http://media.hearthandhome.com/promos/2015_Outdoor_Room/Image.jpg" width="600px" height="347px" alt="David Thorne Landscape Architect" /></td></tr>
<tr><td colspan="3" width="600px" height="5px"></td></tr>
<tr><td colspan="3" width="550px" height="auto" style="background-color: #FFF; padding-left: 25px; padding-right: 25px;">
<h1 align="center" style="font-size: 22px; color: #477696;">We're Looking for a Few Great<br /> Outdoor Rooms</h1>
<hr width="550px" style="border: 1px #d1d1d1 solid;" />
<p style="color: #000000; font-size: 16px;">The August issue of <i>Hearth & Home</i> will feature Outdoor Room Designs. From spectacular, over-the-top showstoppers, to modest, small-scale spaces, we plan to showcase outdoor living areas that will delight and inspire you, and your customers, no matter their budget or vision.</p>
<p style="font-size: 16px; word-spacing: -1px; color: #000000">We hope this Special Section in <i>Hearth & Home</i> will be something you'll want to save for reference and share with your customers as a design resource and idea source while helping them create outdoor kitchens and living spaces in their backyards.</p>
<p style="color: #000000; font-size: 16px;">We invite you to share photos of outdoor projects you have worked on for possible inclusion in this section. Ideally, we would love to see projects that include outdoor kitchens, outdoor fireplaces or fire pits, AND outdoor dining and seating, but we'll gladly consider those that have only some of those elements.</p>
<p style="word-spacing: -1px; color: #000000; font-size: 16px;">Whether you or your business handled the entire project from inception to completion, or worked on just one aspect of it, such as the design, landscaping or supplying the outdoor kitchen appliances, hearth products, patio furniture or other products, we would love to see your photos and hear a little bit about the details.</p>
<p style="color: #000000; font-size: 16px;">Deadline for submissions will be <b>May 22, 2015</b>. All work will be properly credited to you.</p>
<hr width="550px" style="border: 1px #d1d1d1 solid;" />
<p style="font-size: 19px; color: #477696; font-weight: 600" align="center">Thanks! We can't wait to see<br /> your great Outdoor Rooms!</p>
</td></tr>
<tr><td colspan="3" width="600px" height="5px"></td></tr>
<tr><td colspan="2" width="350px" height="80px" style="background-color: #477696; padding-left: 25px; padding-right: 25px;"><p style="color: #FFFFFF; font-size: 14px; font-weight: 200">To submit your project for consideration, click the button to the right and fill out the submission form. When uploading your images, we encourage you to send <i>.zip files</i>. Not sure how to zip files? <a style="color: #FFF" href="http://www.wikihow.com/Zip-Files-Together" alt="How to zip files" target="_blank">Click here</a>.</p></td>
<td width="200px" height="80px" style="background-color: #477696;"><a href="http://www.theoutdoorroom.com/form/" alt="Click here to submit your project" target="_blank"><img style="vertical-align: center;" src="http://media.hearthandhome.com/promos/2015_Outdoor_Room/Button.jpg" width="167px" height="61px" alt="Click here to submit your outdoor room project" /></a></td></tr>
<tr><td colspan="3" width="600px" height="50px" style="vertical-align: center;"><p align="center" style="font-size: 14px; color: #000000"><i>Any questions, please contact<br />
</i></p></td></tr>
</table>
</td></tr></table>
</body>
</html>
最佳答案
没关系，我解决了我自己的问题。
这是页面顶部的三个空单元格，所以我从 3 列减少到 2 列。我失去了标题上方的漂亮间距，但它不再在 Outlook 中中断。
关于html - Microsoft Outlook 打破了我的 table ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30351706/