这是一封用于我公司营销目的的HTML电子邮件。我们从themeforrest购买了一个模板，并从那里进行了编辑。我已经解决了Outlook造成的大部分问题，但似乎无法找到问题的根源。
在电子邮件的其中一个部分中，我有一个带有标题部分的表，另一个表有两列分为自己的列。当我通过Litmus进行测试时，表格中的右栏显示比左侧更长。我已经检查并分析了代码，每个列都与标签和属性相同。我对编码比较陌生，所以我使用MailChimp html编辑器进行预览，代码可能不是那么干净。
这就是我所做的：
以下是该部分的代码：
<table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="bfbfbf" mc:repeatable="promail" mc:variant="testimonials section" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 14px;border: 0;">
<tbody><tr>
<td align="center" style="border-collapse: collapse;">
<table border="0" align="center" width="800" cellpadding="0" cellspacing="0" bgcolor="ffffff" class="container800 blue_bg" style="background-color: rgb(255, 255, 255);border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 14px;border: 0;">
<tbody><tr><td height="50" style="font-size: 50px;line-height: 50px;border-collapse: collapse;"> </td></tr>
<tr>
<td align="center" style="border-collapse: collapse;">
<table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 14px;border: 0;">
<tbody><tr>
<td align="center" style="color: #666666;font-size: 14px;font-family: 'Open Sans', Arial, sans-serif;font-weight: 700;mso-line-height-rule: exactly;line-height: 24px;border-collapse: collapse;" class="outlook white_color" mc:edit="testiheader">
<!-- ======= main header ======= -->
<div class="outlook editable_text" style="line-height: 24px;">
<span class="outlook text_container">
TESTIMONIALS
</span>
</div>
</td>
</tr>
<tr><td height="12" style="font-size: 12px;line-height: 12px;border-collapse: collapse;"> </td></tr>
<tr>
<td align="center" style="border-collapse: collapse;">
<table align="center" width="50" border="0" cellpadding="0" cellspacing="0" bgcolor="0893d3" class="blue_bg" style="background-color: rgb(9, 187, 77);border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 14px;border: 0;">
<tbody><tr><td height="2" style="font-size: 2px;line-height: 2px;border-collapse: collapse;"></td></tr>
</tbody></table>
</td>
</tr>
<tr><td height="12" style="font-size: 12px;line-height: 12px;border-collapse: collapse;"> </td></tr>
<tr>
<td align="center" style="color: #000000;font-size: 28px;font-family: 'Open Sans', Arial, sans-serif;font-weight: 300;mso-line-height-rule: exactly;line-height: 28px;border-collapse: collapse;" class="outlook main-header white_color" mc:edit="testisubheader">
<!-- ======= main header ======= -->
<div class="outlook editable_text" style="line-height: 28px;">
<span class="outlook text_container">
What Do Our Customers Say?
</span>
</div>
</td>
</tr>
<tr><td height="55" style="font-size: 55px;line-height: 55px;border-collapse: collapse;"> </td></tr>
<tr>
<td style="border-collapse: collapse;">
<table border="0" width="285" align="left" cellpadding="0" cellspacing="0" bgcolor="09bb4d" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-radius: 5px;font-size: 14px;border: 0;" class="container590">
<tbody><tr><td height="25" style="font-size: 25px;line-height: 25px;border-collapse: collapse;"> </td></tr>
<tr>
<td style="border-collapse: collapse;">
<table border="0" width="230" height="168" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;height: 168px; font-size: 14px;border: 0;" class="container580">
<tbody><tr>
<td align="left" style="color: #ffffff;font-size: 14px;font-family: Helvetica, Arial, sans-serif;line-height: 24px;border-collapse: collapse;" class="outlook text_color" mc:edit="testitext1">
<!-- ======= section subtitle ====== -->
<div class="outlook editable_text" style="line-height: 24px;">
<span class="outlook text_container">
This is an extremely good company. My agent Brent was excellent, and very timely in explaining the terms, and getting my loan ASAP. Thank you, very much, I will Highly recommend you!<br><br>
</span>
</div>
</td>
</tr>
<tr><td height="25" style="font-size: 25px;line-height: 25px;border-collapse: collapse;"> </td></tr>
<tr>
<td style="border-collapse: collapse;">
<table border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 14px;border: 0;">
<tbody><tr>
<td style="border-collapse: collapse;">
<a href="" style=" border-style: none !important; display: block; border: 0 !important;" class="editable_img"><img editable="true" src="https://gallery.mailchimp.com/5ed1d967731cd6ee36b103443/images/735223a6-a047-4079-8a5e-ffdd8d30e29b.png" style="display: block; width: 50px;" width="50" border="0" alt="team img" mc:edit="testiimg1"></a>
</td>
<td style="border-collapse: collapse;"> </td>
<td style="border-collapse: collapse;">
<table border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 14px;border: 0;">
<tbody><tr>
<td align="left" style="color: #444444;font-size: 16px;font-family: Helvetica, Arial, sans-serif;line-height: 22px;border-collapse: collapse;" class="outlook title_color" mc:edit="testisubtitle1">
<!-- ======= section text ====== -->
<div class="outlook editable_text" style="line-height: 22px">
<span class="outlook text_container">
Linda
</span>
</div>
</td>
</tr>
<tr>
<td align="left" style="color: rgb(68, 68, 68);font-size: 14px;font-family: Helvetica, Arial, sans-serif;line-height: 22px;border-collapse: collapse;" class="outlook blue_color" mc:edit="testisubtitle2">
<!-- ======= section text ====== -->
<div class="outlook editable_text" style="line-height: 22px">
<span class="outlook text_container">
Happy customer
</span>
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr><td height="25" style="font-size: 25px;line-height: 25px;border-collapse: collapse;"> </td></tr>
</tbody></table>
<table border="0" width="2" align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 14px;border: 0;" class="container590">
</table>
<table border="0" width="285" align="right" cellpadding="0" cellspacing="0" bgcolor="09bb4d" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-radius: 5px;font-size: 14px;border: 0;" class="container590">
<tbody><tr><td height="25" style="font-size: 25px;line-height: 25px;border-collapse: collapse;"> </td></tr>
<tr>
<td style="border-collapse: collapse;">
<table border="0" width="230" height="168" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;height: 168px; mso-table-rspace: 0pt;font-size: 14px;border: 0;" class="container580">
<tbody><tr>
<td align="left" style="color: #ffffff;font-size: 14px;font-family: Helvetica, Arial, sans-serif;line-height: 24px;border-collapse: collapse;" class="outlook text_color" mc:edit="testitext2">
<!-- ======= section subtitle ====== -->
<div class="outlook editable_text" style="line-height: 24px;">
<span class="outlook text_container">
This company is very dedicated to their customers! Very organized! Always quick and orderly with every step of the process! Truly a great company to work with! Great people to talk to, who you can understand and never feel lost in the process!
</span>
</div>
</td>
</tr>
<tr><td height="25" style="font-size: 25px;line-height: 25px;border-collapse: collapse;"> </td></tr>
<tr>
<td style="border-collapse: collapse;">
<table border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 14px;border: 0;">
<tbody><tr>
<td style="border-collapse: collapse;">
<a href="" style=" border-style: none !important; display: block; border: 0 !important;" class="editable_img"><img editable="true" src="https://gallery.mailchimp.com/5ed1d967731cd6ee36b103443/images/735223a6-a047-4079-8a5e-ffdd8d30e29b.png" style="display: block; width: 50px;" width="50" border="0" alt="team img" mc:edit="testiimg2"></a>
</td>
<td style="border-collapse: collapse;"> </td>
<td style="border-collapse: collapse;">
<table border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 14px;border: 0;">
<tbody><tr>
<td align="left" style="color: #444444;font-size: 16px;font-family: Helvetica, Arial, sans-serif;line-height: 22px;border-collapse: collapse;" class="outlook title_color" mc:edit="testisubtitle3">
<!-- ======= section text ====== -->
<div class="outlook editable_text" style="line-height: 22px">
<span class="outlook text_container">
Sarah
</span>
</div>
</td>
</tr>
<tr>
<td align="left" style="color: rgb(68, 68, 68);font-size: 14px;font-family: Helvetica, Arial, sans-serif;line-height: 22px;border-collapse: collapse;" class="outlook blue_color" mc:edit="testisubtitle4">
<!-- ======= section text ====== -->
<div class="outlook editable_text" style="line-height: 22px">
<span class="outlook text_container">
Happy customer
</span>
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr><td height="25" style="font-size: 25px;line-height: 25px;border-collapse: collapse;"> </td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr><td height="50" style="font-size: 50px;line-height: 50px;border-collapse: collapse;"> </td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
以下是通过Outlook呈现时的外观图像： [IMG] http://i.imgur.com/16n8Atf.png[/img]
我非常感谢您提供的任何帮助。 - 谢谢！
答案 0 :(得分：0)
我觉得你的问题来自你如何构建具有两列的区域的布局。在HTML中，有三个表在一个td内彼此相邻 - 不应该将所有这些表包装在另一个表中，并且每个表都包含在td中以帮助确保布局正确。我不认为我曾经只是在电子邮件中将多个表放在一起 - 任何有列的内容都应该设置正确的tds。
此外，如果您对空中间表应用不同的宽度和高度，您可以在浏览器中复制布局问题 - 也许Outlook会为该表提供不同的尺寸，从而弄乱您的布局。
![http://i.imgur.com/16n8Atf.png[/img]](http://i.imgur.com/16n8Atf.png[/img]){kind=link}