Question

我无法让Outloook 2013正确呈现此代码。我试图在第二行的600px表中将两列彼此相邻。由于某种原因，第二行中的第一列是跨越600px而第二列正确地向右，但除了600px之外，它只是被添加，因此它比其余列更大。

这是代码的jsfiddle（抱歉长代码）。 https://jsfiddle.net/abdiyohan/hdpjjh5x/2/

<body bgcolor="#CCCCCC">

<table align="center" width="100%" height="100%" bgcolor="#CCCCCC" style="background-color:#CCCCCC;">
    <tr>
        <td width="100%" height="100%" bgcolor="#CCCCCC" style="background-color:#CCCCCC;" align="center">
            <table style="width:600px;" cellpadding="0" cellspacing="0" border="0" width="600" 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" height="95" width="100%">
                        <img align="top" style="font-family:Arial,Helvetica,sans-serif;font-size: 18px;border-style: none;color: #ffffff;" alt="" src="" height="95" width="600" border="0" />
                    </td>
                </tr>
                <tr>
                    <td width="75%" 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 width="100%" 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 height="28" 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" width="25%">
                        <div style="width:100%;height:100%;" width="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" width="100%" 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 width="100%" 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 height="28" 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中断了。任何帮助将不胜感激。

Answer 1

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

Outlook 2013的Colspan宽度问题

1 个答案: