HTML 电子邮件在 Outlook 中的对齐问题
Alignment issue with HTML email in Outlook
我无法在 Outlook 中正确呈现我的 HTML 电子邮件。最上面的图片是它在 Gmail 中的样子。第二张图片被 Outlook 2016 渲染错误。过去两天我一直被这个问题困扰。非常感谢任何帮助。
这是在 HTML 中呈现的代码：
<!-- COLUMN TITLE -->
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:740px;" width="740" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
<table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:7px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
<div class="column-per-33-333333333333336 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;padding-right:25px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
<div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">DATE AND TIME</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
<div class="column-per-50 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;word-break:break-word;">
<div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">TITLE</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
<div class="column-per-16-66666666666666 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;padding-left:10px;word-break:break-word;">
<div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">CODE</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!-- END COLUMN TITLE -->
<!-- HORIZONTAL LINE -->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
<table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:8px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
<div class="column-per-100 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;padding-top:0;padding-right:20px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
<p style="border-top:solid 1px #BBBBBB;font-size:1px;margin:0px auto;width:100%;">
</p>
<!--[if mso | IE]><table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #BBBBBB;font-size:1px;margin:0px auto;width:700px;" role="presentation" width="700px" ><tr><td style="height:0;line-height:0;">
</td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- END HORIZONTAL LINE -->
<!-- FAULT ROW -->
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:740px;" width="740" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
<table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:8px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
<div class="column-per-33-333333333333336 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;padding-right:25px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
<div style="text-decoration:none;font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#528ecb;">[DATE_TIME]</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
<div class="column-per-50 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;word-break:break-word;">
<div style="font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#4a4a4a;">[TITLE]</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
<div class="column-per-16-66666666666666 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;padding-left:10px;word-break:break-word;">
<div style="font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#4a4a4a;">[CODE]</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--END FAULT ROW -->
Outlook-specific（如果 mso）table 列中的每一列都有“740px”。您需要将它们设置为 33%、50% 和 16%（但作为像素），Outlook 才能正常工作。
顺便说一下，对于不支持 <style> 块的其他电子邮件环境，您还应该内联宽度。例如，Gmail IMAP 不支持此功能。所以只需将 width:33% 内联而不是 class.
这是新代码：
<!-- COLUMN TITLE -->
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:740px;" width="740" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
<table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:7px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:244px;" ><![endif]-->
<div class="column-per-33-333333333333336 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:33%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;padding-right:25px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
<div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">DATE AND TIME</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:370px;" ><![endif]-->
<div class="column-per-50 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;word-break:break-word;">
<div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">TITLE</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:118px;" ><![endif]-->
<div class="column-per-16-66666666666666 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:16%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;padding-left:10px;word-break:break-word;">
<div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">CODE</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!-- END COLUMN TITLE -->
<!-- HORIZONTAL LINE -->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
<table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:8px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
<div class="column-per-100 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;padding-top:0;padding-right:20px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
<p style="border-top:solid 1px #BBBBBB;font-size:1px;margin:0px auto;width:100%;">
</p>
<!--[if mso | IE]><table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #BBBBBB;font-size:1px;margin:0px auto;width:700px;" role="presentation" width="700px" ><tr><td style="height:0;line-height:0;">
</td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- END HORIZONTAL LINE -->
<!-- FAULT ROW -->
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:740px;" width="740" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
<table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:8px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:244px;" ><![endif]-->
<div class="column-per-33-333333333333336 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:33%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;padding-right:25px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
<div style="text-decoration:none;font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#528ecb;">[DATE_TIME]</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:370px;" ><![endif]-->
<div class="column-per-50 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;word-break:break-word;">
<div style="font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#4a4a4a;">[TITLE]</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:118px;" ><![endif]-->
<div class="column-per-16-66666666666666 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:16%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;padding-left:10px;word-break:break-word;">
<div style="font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#4a4a4a;">[CODE]</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--END FAULT ROW -->
我无法在 Outlook 中正确呈现我的 HTML 电子邮件。最上面的图片是它在 Gmail 中的样子。第二张图片被 Outlook 2016 渲染错误。过去两天我一直被这个问题困扰。非常感谢任何帮助。
这是在 HTML 中呈现的代码：
<!-- COLUMN TITLE -->
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:740px;" width="740" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
<table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:7px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
<div class="column-per-33-333333333333336 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;padding-right:25px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
<div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">DATE AND TIME</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
<div class="column-per-50 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;word-break:break-word;">
<div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">TITLE</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
<div class="column-per-16-66666666666666 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;padding-left:10px;word-break:break-word;">
<div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">CODE</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!-- END COLUMN TITLE -->
<!-- HORIZONTAL LINE -->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
<table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:8px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
<div class="column-per-100 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;padding-top:0;padding-right:20px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
<p style="border-top:solid 1px #BBBBBB;font-size:1px;margin:0px auto;width:100%;">
</p>
<!--[if mso | IE]><table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #BBBBBB;font-size:1px;margin:0px auto;width:700px;" role="presentation" width="700px" ><tr><td style="height:0;line-height:0;">
</td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- END HORIZONTAL LINE -->
<!-- FAULT ROW -->
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:740px;" width="740" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
<table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:8px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
<div class="column-per-33-333333333333336 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;padding-right:25px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
<div style="text-decoration:none;font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#528ecb;">[DATE_TIME]</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
<div class="column-per-50 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;word-break:break-word;">
<div style="font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#4a4a4a;">[TITLE]</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
<div class="column-per-16-66666666666666 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;padding-left:10px;word-break:break-word;">
<div style="font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#4a4a4a;">[CODE]</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--END FAULT ROW -->
Outlook-specific（如果 mso）table 列中的每一列都有“740px”。您需要将它们设置为 33%、50% 和 16%（但作为像素），Outlook 才能正常工作。
顺便说一下，对于不支持 <style> 块的其他电子邮件环境，您还应该内联宽度。例如，Gmail IMAP 不支持此功能。所以只需将 width:33% 内联而不是 class.
这是新代码：
<!-- COLUMN TITLE -->
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:740px;" width="740" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
<table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:7px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:244px;" ><![endif]-->
<div class="column-per-33-333333333333336 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:33%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;padding-right:25px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
<div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">DATE AND TIME</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:370px;" ><![endif]-->
<div class="column-per-50 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;word-break:break-word;">
<div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">TITLE</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:118px;" ><![endif]-->
<div class="column-per-16-66666666666666 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:16%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;padding-left:10px;word-break:break-word;">
<div style="font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:12px;line-height:1;text-align:left;color:#9c9c9c;">CODE</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!-- END COLUMN TITLE -->
<!-- HORIZONTAL LINE -->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
<table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:8px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:740px;" ><![endif]-->
<div class="column-per-100 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;padding-top:0;padding-right:20px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
<p style="border-top:solid 1px #BBBBBB;font-size:1px;margin:0px auto;width:100%;">
</p>
<!--[if mso | IE]><table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #BBBBBB;font-size:1px;margin:0px auto;width:700px;" role="presentation" width="700px" ><tr><td style="height:0;line-height:0;">
</td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- END HORIZONTAL LINE -->
<!-- FAULT ROW -->
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:740px;" width="740" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:740px;">
<table class="event-history-outlook" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px 0;padding-bottom:8px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:244px;" ><![endif]-->
<div class="column-per-33-333333333333336 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:33%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;padding-right:25px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
<div style="text-decoration:none;font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#528ecb;">[DATE_TIME]</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:370px;" ><![endif]-->
<div class="column-per-50 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;word-break:break-word;">
<div style="font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#4a4a4a;">[TITLE]</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:118px;" ><![endif]-->
<div class="column-per-16-66666666666666 outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:16%;">
<table class="event-history-outlook" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 0 10px 0;padding-bottom:0px;padding-left:10px;word-break:break-word;">
<div style="font-family:Helvetica;font-size:12px;line-height:1;text-align:left;color:#4a4a4a;">[CODE]</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--END FAULT ROW -->