当前位置： 文江博客话题详情

Outlook 中 HTML 电子邮件的对齐问题

发布于 2025-01-10 06:53:09 字数 12201 浏览 0 评论 0原文

我在 Outlook 中正确呈现 HTML 电子邮件时遇到问题。上面的图片是它在 Gmail 中的样子。第二张图片由 Outlook 2016 渲染不正确。过去 2 天我一直被这个问题困扰。任何帮助都非常感激。

这是在 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;"> &nbsp;
                                            </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 -->

在 Gmail 中正确呈现表格

Outlook 中的表格渲染不正确

原文

I'm having trouble rendering my HTML email correctly in Outlook. The top picture is how it is supposed to look like in Gmail. The second picture is being rendered incorrectly by Outlook 2016. I've been stuck on this issue for the past 2 days. Any helps is greatly appreciate it.

This is the code that is being rendered in 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 -->

Table Render Correctly in Gmail

Table Render Incorrectly in Outlook

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

墨小墨 2025-01-17 06:53:09

每个特定于 Outlook（如果是 mso）的表列都有“740px”。您需要将它们设置为 33%、50% 和 16%（但作为像素），Outlook 才能正常工作。

顺便说一句，您还应该内联不支持

这是新代码：

    <!-- 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 -->

You've got "740px" for each of the Outlook-specific (if mso) table columns. You would need to make them 33%, 50% and 16% -- but as pixels -- for Outlook to work.

Incidentally, you should also inline the widths for other email environments that don't support <style> blocks. For example, Gmail IMAP doesn't support this. So just put the width:33% inline instead of as a class.

Here's the new code:

    <!-- 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 -->
回复 原文
~没有更多了~

关于作者

森林散布

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

卷耳

文章 0 评论 0

佚名

文章 0 评论 0

℉服软

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

凉宸

文章 0 评论 0

gyhjy

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文