HTML电子邮件表从Outlook桌面的底部开始

时间:2014-02-21 06:48:14

标签: html css outlook html-table html-email

我正在创建一个Fluid html电子邮件。父表中有2个表。表的左侧比右侧的内容更多。仅在Outlook桌面中,右侧表格才会显示在底部。我蚂蚁右桌总是对齐到顶部。如果我在左侧的内容较少。它完美无缺。 以下是示例HTML代码:

<table border="0" cellspacing="0" cellpadding="0" width="100%" style="border-collapse: collapse;" >
    <tr>
        <td valign="top">
            <!--[if (gte mso 9)|(IE)]>
            <table width="69%" align="left" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td valign="top">
            <![endif]-->
            <table class="col535" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;max-width:535px;width:100%;border-right:1px solid #aaaaaa;">
                <tr>
                    <td class="left_column_stack" valign="top" style="padding:0 20px 0 0;vertical-align:top;">
                        // Very Long Text (1500 lines)
                    </td>
                </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
                    </td>
                </tr>
            </table>
            <![endif]-->

            <!--[if (gte mso 9)|(IE)]>
            <table width="25%" align="left" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
            <![endif]-->
            <table width="200" cellpadding="0" cellspacing="0" border="0" align="left" style="border-collapse:collapse;max-width:200px;width:100%;">
                <tr>
                    <td class="right_column" valign="top" style="padding:0 0 0 20px;" >
                        // Small Text (250 lines)
                    </td>
                </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
                    </td>
                </tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>

JS小提琴:http://jsfiddle.net/NrERK/

注意:它只表现奇怪的Outlook桌面。在其他地方它的工作好。 请提供任何解决方案。

2 个答案:

答案 0 :(得分:0)

在制作HTML电子邮件时,如果您使用'px'值而不是'%'值,那将是一件好事。

我已将主表的宽度从100%更改为700px

这是一个jsfiddle link

<table border="0" cellspacing="0" cellpadding="0" width="700" style="border-collapse: collapse;" >
<tr>
    <td valign="top">
        <!--[if (gte mso 9)|(IE)]>
        <table width="69%" align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td valign="top">
        <![endif]-->
        <table class="col535" cellpadding="0" cellspacing="0" align="left" style="float:left;border-collapse:collapse;max-width:500px;width:100%;border-right:1px solid #aaaaaa;">
            <tr>
                <td class="left_column_stack" valign="top" style="padding:0 20px 0 0;vertical-align:top;">
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>                  
                </td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
                </td>
            </tr>
        </table>
        <![endif]-->

        <!--[if (gte mso 9)|(IE)]>
        <table width="25%" align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td>
        <![endif]-->
        <table width="200" cellpadding="0" cellspacing="0" border="0" align="left" style="float:left;border-collapse:collapse;max-width:200px;width:100%;">
            <tr>
                <td class="right_column" valign="top" style="padding:0 0 0 20px;" >
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>
                    Left Side <br>

                </td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
                </td>
            </tr>
        </table>
        <![endif]-->
    </td>
</tr>
</table>

答案 1 :(得分:0)

如果缩短第一栏,是否可以解决问题?

根据您的描述,这可能是Outlook分页问题。这是an example

它也可能是一个浮动(对齐)问题,如果没有看到截图,很难分辨。