在Outlook 2007及更高版本中强制使用电子邮件中的html并排表格

我刚刚遇到Outlook破坏我的HTML电子邮件时遇到的第一个挫折感.

我有一个640像素宽的容器表.在它是两个320px表,一个左对齐,一个右对齐.
它们并排在除Word Engined Outlook(2007及更高版本)之外的所有电子邮件客户端中.

这是重要的部分.我有代码在手机上查看时使包含表变为320px宽.这会强制两个表一个在另一个之上.
这完全按照计划用于移动设备.

但桌面上的Outlook会渲染左对齐的表格,然后在它下方呈现左侧下方的右侧表格,但仍然向右对齐,在左侧桌子下方创建一个大间隙,在右侧桌子上方形成一个大间隙.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
    img 
    {display:block;}
    a 
    {text-decoration:none;}
    a:hover
    {text-decoration: underline !important;}
    td.contentblock p { 
        color:#FFFFFF;
        font-size:16px;
        font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
        margin-top:0;
        margin-bottom:12px;
        padding-top:0;
        padding-bottom:0;
        font-weight:normal;
    }
    td.contentblock p a { 
        color:#e45808;
        text-decoration:none;
    }
    .heading {
        font-size:24px;
        font-weight:bold;
    }
    @media only screen and (max-device-width: 480px) {
         table[class="table"], td[class="cell"] {
              width: 320px !important;
         }
        td[class="footershow"] {
              width: 320px !important;
         }
        table[class="hide"], img[class="hide"], td[class="hide"], br[class="hide"], div[class="hide"] {
              display: none !important;
         }
         img[class="divider"] {
              height: 1px !important;
         }
         img[id="header"] {
              width: 320px !important;
              height: 69px !important;
         }
         img[id="main"] {
              width: 320px !important;
              height: 45px !important;
         }
         img[id="footer"] {
              width: 320px !important;
              height: 43px !important;
         }
        p[class="reminder"] {
            font-size: 11px !important;
        }
        span[class="secondary"] {
            line-height: 20px !important;
            margin-bottom: 15px !important;
            font-size: 13px !important;
        }
    }
    </style>
</head>
<body bgcolor="#e4e4e4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#e4e4e4;-webkit-text-size-adjust:none;">

<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#EEEEEE">
<tr>
    <td bgcolor="#EEEEEE" width="100%">

    <table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
    <tr>
        <td width="640" class="cell" style="color:#FFF;">

        <table class="table" width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td bgcolor="#cc6600" class="contentblock cell" style="color:#FFFFFF;font-size:16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
            <table width="320" bgcolor="#cc6600" cellpadding="0" cellspacing="0" border="0" align="left">
            <tr>
                <td>
                <a href="#" target="_blank" title="#" style="text-decoration:none;color:#FFF;"><img src="http://www.example.com/image_01.png" alt="#" width="320" height="167" border="0" style="display:block;" /></a>
                </td>
            </tr>
            </table>
            <table width="320" bgcolor="#cc6600" cellpadding="0" cellspacing="0" border="0" align="right">
            <tr>
                <td>
                <a href="#" target="_blank" title="#" style="text-decoration:none;color:#FFF;"><img src="http://www.example.com/image_02.png" alt="#" width="320" height="167" border="0" style="display:block;" /></a>
                </td>
            </tr>
            </table>
            </td>
        </tr>
        </table>
        </td>
    </tr>
    </table>
    </td>
</tr>
</table>                         

</body>
</html>

如果有人可以帮我找到一种方法在Outlook中仍然有我的两个并排表,但仍然让他们在手机中重新调整到另一个,我会非常感激.

最佳答案
快速回答是使内表的宽度减小几个像素.就目前而言,Outlook在它们之间增加了几个像素,导致320(几个像素)320> 640.

更准确的方法是添加mso-table-lspace和mso-table-rspace以减少差距.见this example.

转载注明原文:在Outlook 2007及更高版本中强制使用电子邮件中的html并排表格 - 代码日志