Outlook 2013 的 Colspan 宽度问题

Posted

技术标签:

【中文标题】Outlook 2013 的 Colspan 宽度问题【英文标题】：Colspan Width Issue for Outlook 2013 【发布时间】：2015-08-02 07:41:00 【问题描述】：

我无法让 Outlook 2013 正确呈现此代码。我试图在第二行的 600px 表中让两列彼此相邻。 出于某种原因，第二行中的第一列跨越 600 像素，第二列正确地位于右侧，但是除了 600 像素之外，它只是被附加了，因此它的跨度大于其余列。

这里是代码的 jsfiddle（对不起，长代码）。 https://jsfiddle.net/abdiyohan/hdpjjh5x/2/

<body bgcolor="#CCCCCC">


<table align="center"   bgcolor="#CCCCCC" style="background-color:#CCCCCC;">
    <tr>
        <td   bgcolor="#CCCCCC" style="background-color:#CCCCCC;" align="center">
            <table style="width:600px;" cellpadding="0" cellspacing="0" border="0"  bgcolor="#ffffff" align="center">
                <tr>
                    <td colspan="2" style="border-top: 7px solid #a0a5a6; border-bottom: 2px solid #a0a5a6; color: #000000;width:100%;" bgcolor="#005195"  >
                        <img align="top" style="font-family:Arial,Helvetica,sans-serif;font-size: 18px;border-style: none;color: #ffffff;"  src=""   border="0" />
                    </td>
                </tr>
                <tr>
                    <td  style="border-bottom: 2px solid #a0a5a6;padding:20px 20px 10px 20px;font-family: Arial,Helvetica,sans-serif; color: #e83e2a; width:75%;font-size: 14pt; line-height: 28px;" valign="top" align="left">
                        <div  style="width:100%;font-family: Arial,Helvetica,sans-serif; color:#005195;padding-bottom:0px; font-size: 14pt; line-height: 28px;"><a name="English">Lorem Ipsum</a>

                            <p style="line-height: 20px; margin-bottom: 10px; margin-top: 0px; font-size: 11pt;padding-top:10px;color:#005195;">Lorem Ipsum,</p>
                            <table cellpadding="0" cellspacing="0" border="0" style="display:block;margin:0px 20px 20px 0;" align="left">
                                <tr>
                                    <td  style="height:28px;font-family: Arial,Helvetica,sans-serif; font-size: 14px; background:#ccc; border-radius: 5px; padding: 0px 10px; color: #005195;" align="left">
                                        <div align="center"><a style="color: #005195; text-decoration: none;" href="#top" target="_self">Back to Top</a>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                    <td colspan="1" style="border-bottom: 2px solid #a0a5a6;background-color:#efefef;padding:20px 20px 0px 20px;font-family: Arial,Helvetica,sans-serif;color:#005195; width:25%; font-size: 14pt; line-height: 28px;" align="right" bgcolor="#ffffff" valign="top" >
                        <div style="width:100%;height:100%;" >
                             <h1 style="font-size: 14pt;font-family: Arial,Helvetica,sans-serif;color:#005195;font-weight:normal;padding:0px;margin:0px;">Global Links</h1>

                            <p style="color:#4682B4;font-size: 11pt; line-height: 18px; margin-bottom: 10px;margin-top:10px;"><a style="color:#4682B4; text-decoration: none;" href="#English" target="_self">English</a>
                            </p>
                            <p style="color:#4682B4;font-size: 11pt; line-height: 18px; margin-bottom: 10px; margin-top: 20px;"><a style="color:#4682B4; text-decoration: none;" href="#Spanish (Latin America)" target="_self">Español (Latinoamérica)</a>
                            </p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2"  style="border-bottom: 2px solid #a0a5a6;padding:20px 20px 10px 20px;font-family: Arial,Helvetica,sans-serif; color: #e83e2a; width: 100%;font-size: 14pt; line-height: 28px;" valign="top" align="left">
                        <div  style="width:100%;font-family: Arial,Helvetica,sans-serif; color:#005195;padding-bottom:0px; font-size: 14pt; line-height: 28px;"> <a name="Spanish (Latin America)"></a>¡Comparta su opinión!
                            <p style="line-height: 20px; margin-bottom: 10px; margin-top: 0px; font-size: 11pt;padding-top:10px;color:#005195;">Lorem Ipsum,</p>
                            <table cellpadding="0" cellspacing="0" border="0" style="display:block;margin:0px 20px 20px 0;" align="left">
                                <tr>
                                    <td  style="height:28px;font-family: Arial,Helvetica,sans-serif; font-size: 14px; background:#ccc; border-radius: 5px; padding: 0px 10px; color: #005195;" align="left">
                                        <div align="center"><a style="color: #005195; text-decoration: none;" href="#top" target="_self">Back to Top</a>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

我知道代码看起来很乱，但我已经尝试了很多来自互联网的解决方案和修复程序，但都没有提出任何建议。

此代码在 OWA 中有效，这很奇怪且令人沮丧，但在 Outlook 2013 和 Outlook 2011 for Mac 中会中断。任何帮助将不胜感激。

【问题讨论】：

【参考方案1】：

事实上，Outlook 使用 Word 来呈现 html 标记。您可以在 MSDN 的以下系列文章中找到支持和不支持的 HTML 元素、属性和级联样式表属性：

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2) Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)

【讨论】：

根据该页面，完全支持 td 标签和 colspan。它对手头的问题没有多大帮助。另外，2007年和2013年有区别吗？不是 100% 确定的。

以上是关于Outlook 2013 的 Colspan 宽度问题的主要内容，如果未能解决你的问题，请参考以下文章

减少引导表宽度，colspan 不起作用

带有 colspan 集的 Internet Explorer 8 表格单元格宽度错误

当具有定义宽度的子元素位于具有 colspan 的单元格内时，如何修复 Microsoft Edge 显示不正确的表格单元格宽度？

解决 Safari 表格 colspan/writing-mode 宽度错误

html电子邮件中的rowspan和colspan

在 Outlook 中浮动替换电子邮件