html - Outlook 2013 的 Colspan 宽度问题

标签 html css outlook html-table html-email

我无法让 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 中会中断。任何帮助将不胜感激。

最佳答案

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

关于html - Outlook 2013 的 Colspan 宽度问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30360167/

相关文章:

sql - 在 VBA 代码中执行 SQL 语句

html - Bootstrap Navbar 内容不居中

jquery Accordion 菜单,制作标题超链接

html - Symfony 打印 a4 格式的标签

css - 如何继承min-width和max-width的宽度?

c# - 在将图像用作 PictureBox 的源后,如何从文件夹中删除这些图像?

vba - 如何从 Items_ItemAdd 事件中过滤项目发件人姓名?

javascript - 带动画的马赛克几何菜单

html - 响应式表格中的 Bootstrap 下拉菜单

javascript - onclick 密码警报,同时还有 onclick 打印