我有一个3列html电子邮件表，请参阅下面的代码，除了一个在最后一个表列的顶部发出差距之外，所有内容都在同一行上对齐。从2007年至2013年的展望来看，差距变得非常大，差距基本上会变得更大。
我的问题是如何消除这种差距，在http://codepen.io/anon/pen/qdkel查看问题并将其更详细地检查，并将鼠标悬停在第三列上。
这是视觉
http://take.ms/9qIva Outlook 2007
http://take.ms/a9FET展望2013
CSS重置
table {border-spacing:0;}
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
table td, table tr { border-collapse: collapse; }
<tr>
<td align="center" valign="top" class="fix-box">
<!-- start LAYOUT-5 container width 600px -->
<table width="600" align="center" border="0" cellspacing="0" cellpadding="0" class="container">
<tbody><tr>
<td valign="top" width="100%">
<!-- start LAYOUT-5 container width 560px -->
<table width="560" align="center" border="0" cellspacing="0" cellpadding="0" class="full-width">
<!-- start image and content -->
<tbody><tr>
<td valign="top" width="100">
<!-- start content left -->
<table width="160" border="0" cellspacing="0" cellpadding="0" align="left" class="col-3" bgcolor="#ede8e7">
<tbody><tr>
<td width="100%" valign="top" align="left" class="image-160px">
<img src="http://passiondev.co.uk/email-newsletter/coats/imageplaceholder.jpg" width="160" alt="image5_280x210" style="max-width:100%;
display:block !important; " border="0" hspace="0" vspace="0">
</td>
</tr>
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td style="font-size: 16px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#621a4b; font-weight:bold; text-align:left;
padding-left: 15px; padding-right: 15px;">
Embroidery
</td>
</tr>
<!--start space height -->
<tr>
<td height="15"></td>
</tr>
<!--end space height -->
<tr>
<td style="font-size: 13px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#808080; font-weight:300;
text-align:justify; padding-left: 15px; padding-right: 15px; ">
Phoomph makes creating decorations and costumes fast and
easy. Download our free e-book of 13 projects Halloween projects.
</td>
</tr>
<tr>
<td valign="top" width="auto">
<!-- start button -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="auto" align="center" valign="middle" height="40" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma,
Helvetica, sans-serif; text-align:left; color:#5f294f; font-weight: 300;
padding-left: 15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: bold;">
<span style="color: #5f294f; font-weight: bold;
text-decoration: none;">
Read more
</span>
</a>
</td>
</tr>
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style="color: #5f294f; font-weight: 300;
text-decoration: none;">
Related link 1
</span>
</a>
</td>
</tr>
<!--start space height -->
<tr>
<td height="5"></td>
</tr>
<!--end space height -->
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
</tbody>
</table>
<!-- end button -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--start space height -->
<tr>
<td height="20" class="col-underline"></td>
</tr>
<!--end space height -->
</tbody></table>
<!-- end content left -->
<!-- start space width -->
<table class="remove" width="40" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse:
collapse;">
<tbody><tr>
<td width="100%" height="3" style="font-size: 0;line-height:
0;border-collapse: collapse;">
</td>
</tr>
</tbody></table>
<!-- end space width -->
<!-- start content center -->
<table width="160" border="0" cellspacing="0" cellpadding="0" align="left" class="col-3" bgcolor="#ede8e7">
<tbody><tr>
<td width="100%" valign="top" align="left" class="image-160px">
<img src="http://passiondev.co.uk/email-newsletter/coats/imageplaceholder.jpg" width="160" alt="image6_280x210" style="max-width:100%;
display:block !important; " border="0" hspace="0" vspace="0">
</td>
</tr>
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td style="font-size: 16px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#621a4b; font-weight:bold;
text-align:left; padding-left: 15px; padding-right: 15px;">
Crochet
</td>
</tr>
<!--start space height -->
<tr>
<td height="15"></td>
</tr>
<!--end space height -->
<tr>
<td style="font-size: 13px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#808080; font-weight:300;
text-align:justify; padding-left: 15px; padding-right: 15px; ">
Phoomph makes creating decorations and costumes fast and
easy. Download our free e-book of 13 projects Halloween projects.
</td>
</tr>
<tr>
<td valign="top" width="auto">
<!-- start button -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="auto" align="center" valign="middle" height="40" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma,
Helvetica, sans-serif; text-align:left; color:#5f294f; font-weight: 300;
padding-left: 15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: bold;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: bold;">
Read more
</span>
</a>
</td>
</tr>
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
<!--start space height -->
<tr>
<td height="5"></td>
</tr>
<!--end space height -->
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style="text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
</tbody></table>
<!-- end button -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--start space height -->
<tr>
<td height="20" class="col-underline"></td>
</tr>
<!--end space height -->
</tbody></table>
<!-- end content center -->
<!-- start space width -->
<table class="remove" width="40" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse:
collapse;">
<tbody><tr>
<td width="100%" height="3" style="font-size: 0;line-height:
0;border-collapse: collapse;">
</td>
</tr>
</tbody></table>
<!-- end space width -->
<!-- start content Right -->
<table width="160" border="0" cellspacing="0" cellpadding="0" align="right" class="col-3" bgcolor="#ede8e7">
<tbody><tr>
<td width="100%" valign="top" align="left" class="image-160px">
<img src="http://passiondev.co.uk/email-newsletter/coats/imageplaceholder.jpg" width="160" alt="image6_280x210" style="max-width:100%;
display:block !important; " border="0" hspace="0" vspace="0">
</td>
</tr>
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td style="font-size: 16px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#621a4b; font-weight:bold;
text-align:left; padding-left: 15px; padding-right: 15px;">
Crochet
</td>
</tr>
<!--start space height -->
<tr>
<td height="15"></td>
</tr>
<!--end space height -->
<tr>
<td style="font-size: 13px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#808080; font-weight:300;
text-align:justify; padding-left: 15px; padding-right: 15px; ">
Phoomph makes creating decorations and costumes fast and
easy. Download our free e-book of 13 projects Halloween projects.
</td>
</tr>
<tr>
<td valign="top" width="auto">
<!-- start button -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="auto" align="center" valign="middle" height="40" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma,
Helvetica, sans-serif; text-align:left; color:#5f294f; font-weight: 300;
padding-left: 15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: bold;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: bold;">
Read more
</span>
</a>
</td>
</tr>
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
<!--start space height -->
<tr>
<td height="5"></td>
</tr>
<!--end space height -->
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style="text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
</tbody></table>
<!-- end button -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--start space height -->
<tr>
<td height="20" class="col-underline"></td>
</tr>
<!--end space height -->
</tbody></table>
<!-- end content right -->
</td>
</tr>
<!-- end image and content -->
</tbody></table>
<!-- end LAYOUT-5 container width 560px -->
</td>
</tr>
</tbody></table>
<!-- end LAYOUT-5 container width 600px -->
</td>
</tr>
答案 0 :(得分：0)
您应该从行之间的空表中删除高度。通常是在通讯中定义高度的坏策略！同样在简报中的空单元格中，总是添加两个空格字符。
<!-- start space width -->
<table class="remove" width="200" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse:
collapse;">
<tbody><tr>
<td width="100%" style="font-size: 0;line-height:
0;border-collapse: collapse;"> </td>
</tr>
</tbody></table>
<!-- end space width -->
我只检查过outlook，如果你有其他问题请评论我。