Question

更新（工作）代码：

<!DOCTYPE html> 
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=600" />
            <title>Talent Academy Newsletter</title>
        </head>
    </html>

    <body width="700" style="width: 100% !important; background-color: #FFF; left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
        <!--[if mso]>
                        <center>
                        <table><tr><td width="700">
                        <![endif]-->
            <table width="100%" align="center" cellpadding="0" cellspacing="0" valign="top" height="auto" style="max-width: 700px!important left-margin:0; right-margin:0; top-margin:0; margin-height:0;"> <!-- // wrapping table // --> 
            <tr>
                <td width="700" align="center" valign="top"> 
                    <table width="700" cellpadding="0" cellspacing="0" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
                        <tr> 
                            <td align="center" valign="middle" width="700" style="background-color: #e7e7e7; height: 25; text-align: center; font-size: 10px; font-family: Arial, Helvetica; color: #000;">
                                <p>Is Outlook ruining this pretty email? Click <strong>here</strong></p>  <!--**add link here when on FTP** e.g... <a href="http://www.feverpr.com/client/update/index.html" target="_blank" style="color: #FFF; text-decoration: none;"> --> 
                            </td>
                        </tr>
                        <tr> 
                            <td align="center" valign="top" width="700" style="display: block; padding: 0;"> <!-- // welcome banner here // --> 
                                <img src="images/welcome.png" alt="Welcome!" height="340" width="700"> 
                            </td>
                        </tr>
                    </table>
                    <table width="470" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;"> <!-- // into copy here // --> <!--be wary of width size here: 470--> 
                        <tr>
                            <td align="center" valign="top" width="470" style="text-align: center; font-size: 18px; font-family: League Gothic, Arial; color: #000; padding-top: 15px;">
                                <p>1st edition <br> September 2016</p>
                            </td>
                        </tr>
                        <tr>
                            <td align="center" valign="top" width="470" style="text-align: center; font-size: 15px; font-family: Helvetica, Arial; color: #000; padding: 0px, 115px, 0px, 115px;"> <!--used another td as dif font/size --> 
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra justo sed turpis rutrum, non molestie velit vehicula. Suspendisse sed est nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sem odio, viverra eu velit vitae, posuere blandit orci. Integer placerat tempus tortor in pretium. Donec vitae magna et tortor maximus pulvinar vitae et magna. Nam aliquam molestie commodo.</p>
                            </td>
                        </tr>
                    </table>
                    <table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
                        <tr width="100%">
                            <td width="700" align="center" valign="top" width="700" style="display: block; padding-top: 30px; padding-bottom:50px;">
                                <img src="images/fever.png" alt="Welcome!" height="79" width="79">
                                <img src="images/nb.png" alt="Welcome!" height="79" width="79">
                                <img src="images/nbg.png" alt="Welcome!" height="79" width="79">
                                <img src="images/mw.png" alt="Welcome!" height="79" width="79">
                            </td> 
                        </tr>
                    </table>
                    <table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
                        <tr>
                            <td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
                                <img src="images/internal.png" alt="Internal Training" height="85" width="700">
                            </td>
                        </tr>
                    </table>
                    <table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
                        <tr>
                            <td width="260" valign="top" align="center" style="max-width:260px!important; padding: 40px 63.5px 30px 20px;"> <!-- // bottom two //--> 
                                <p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>  
                                <img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
                                <img src="images/fever2.png" alt="NB" height="35" width="32" align="right">
                            </td>
                            <td width="3" style="padding-top: 40px; padding-bottom: 30px;">
                                <img src="images/line1.png" alt="" height="200" width="3"> 
                            </td>
                            <td width="260" valign="top" align="center" style="padding: 40px 20px 30px 63.5px;"> 
                                <p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p> 
                                <img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
                                <img src="images/nbg2.png" alt="NB" height="35" width="32" align="right">
                            </td>
                        </tr>
                    </table>
                    <table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
                        <tr>
                            <td width="260" valign="top" align="center" style="max-width:260px!important; padding: 40px 63.5px 30px 20px;"> <!-- // bottom two //--> 
                                <p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>  
                                <img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
                                <img src="images/fever2.png" alt="NB" height="35" width="32" align="right">
                            </td>
                            <td width="3" style="padding-top: 40px; padding-bottom: 30px;">
                                <img src="images/line1.png" alt="" height="200" width="3"> 
                            </td>
                            <td width="260" valign="top" align="center" style="padding: 40px 20px 30px 63.5px;"> 
                                <p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p> 
                                <img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
                                <img src="images/nbg2.png" alt="NB" height="35" width="32" align="right">
                            </td>
                        </tr>
                    </table>
                    <table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;"> <!-- // start of external training section // --> 
                        <tr width="700">
                            <td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
                                <img src="images/external.png" alt="Internal Training" height="85" width="700"> <!-- // banner image // --> 
                            </td>
                        </tr>
                    </table>
                    <table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
                        <tr>
                            <td width="260" valign="top" align="center" style="padding: 20px 63.5px 20px 20px;"> <!-- // bottom two //--> 
                                <p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>  
                            </td>
                            <td width="3" style="padding-top: 10px; padding-bottom: 20px;">
                                <img src="images/line1.png" alt="" height="200" width="3"> 
                            </td>
                            <td width="260" valign="top" align="center" style="padding: 20px 20px 20px 63.5px;"> 
                                <p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p> 
                            </td>
                        </tr>
                    </table>
                    <table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
                        <tr>
                            <td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
                                <img src="images/dare.png" alt="Dare to Share" height="85" width="700"> <!-- // banner image - dare to share section starts here // --> 
                            </td>
                        </tr>
                    </table>
                    <table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
                        <tr>
                            <td width="380" style="padding: 5px 0px 40px 20px;"> 
                                <p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>PELLENTESQUE HABITANT TRISTIQUE</strong><br>Nam at auctor ante. Integer finibus nisl at euismod iaculis. Proin eleifend nunc ante, hendrerit semper felis pellentesque non. Etiam id quam metus. Ut pretium congue turpis ullamcorper tempus. Vivamus finibus elit ipsum, sit amet egestas dolor condimentum nec.<br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p> 
                                <img src="images/icon_mail.png" alt="" height="26" width="33" align="left">
                                <img src="images/icon_web.png" alt="" height="31" width="31" align="left">
                            </td>
                            <td width="300" align="left">
                                <img src="images/circle_right.png" alt="Dare to Share" height="255" width="240" style="padding-bottom: 20px; padding-left: 60px;">
                            </td>
                        </tr>
                    </table>
                    <table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
                        <tr>
                        <td width="300" align="left">
                                <img src="images/circle_left.png" alt="Dare to Share" height="255" width="240" style="padding-bottom: 20px; padding-top: 10px;">
                            </td>
                            <td width="380" style="padding: 5px 20px 40px 0px;"> 
                                <p align="right" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>PELLENTESQUE HABITANT TRISTIQUE</strong><br>Nam at auctor ante. Integer finibus nisl at euismod iaculis. Proin eleifend nunc ante, hendrerit semper felis pellentesque non. Etiam id quam metus. Ut pretium congue turpis ullamcorper tempus. Vivamus finibus elit ipsum, sit amet egestas dolor condimentum nec.<br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p> 
                                <img src="images/icon_mail.png" alt="" height="26" width="33" align="right">
                                <img src="images/icon_web.png" alt="" height="31" width="31" align="right">
                            </td>
                        </tr>
                    </table>
                    <table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
                        <tr>
                            <td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
                                <img src="images/firsthand.png" alt="Internal Training" height="85" width="700"> <!-- // banner image // --> 
                            </td>
                        </tr>
                    </table>
                    <table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
                        <tr>
                            <td width="380" style="padding: 5px 0px 40px 20px;"> 
                                <p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>PELLENTESQUE HABITANT TRISTIQUE</strong><br>Nam at auctor ante. Integer finibus nisl at euismod iaculis. Proin eleifend nunc ante, hendrerit semper felis pellentesque non. Etiam id quam metus. Ut pretium congue turpis ullamcorper tempus. Vivamus finibus elit ipsum, sit amet egestas dolor condimentum nec.<br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
                            </td>
                            <td width="300" align="left">
                                <img src="images/circle_right.png" alt="Dare to Share" height="255" width="240" style="padding-bottom: 20px; padding-left: 60px;">
                            </td>
                        </tr>
                    </table>
                    <table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
                        <tr>
                            <td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
                                <img src="images/useful.png" alt="Internal Training" height="85" width="700"> <!-- // banner image useful stuff // --> 
                            </td>
                        </tr>
                    </table>
                    <table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
                        <tr>
                            <td width="380" valign="top" align="center" style="max-width:400px!important; padding: 10px 30px 30px 20px;"> <!-- // bottom two //--> 
                                <p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>TIP OF THE MONTH</strong><br>Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi.</p>  
                                <img src="images/icon_speech.png" alt="" height="48" width="55" align="right" style="padding: 20px 20px 30px 0px;">
                            </td>
                            <td width="3" style="padding-top: 10px; padding-bottom: 30px;">
                                <img src="images/line1.png" alt="" height="150" width="3"> 
                            </td>
                            <td width="217" valign="top" align="center" style="padding: 10px 20px 30px 30px;"> 
                                <p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>USEFUL LINKS</strong><br>euismod.com<br>placerat.com<br>nullam.co.uk<br>efficitur.com</p> 
                                <img src="images/icon_comp.png" alt="NB" height="48" width="50" align="right" style="padding: 20px 20px, 30px 0px;">
                            </td>
                        </tr>
                    </table>
                    <table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
                        <tr width="100%">
                            <td width="700" align="center" valign="top" width="700" style="display: block;">
                                <img src="images/icon_facebook.png" alt="" height="24" width="15" style="padding: 10px 10px 0px 10px;">
                                <img src="images/icon_insta.png" alt="" height="24" width="26" style="padding: 10px 10px 0px 10px;">
                                <img src="images/icon_twitter.jpg" alt="" height="24" width="30" style="padding: 10px 10px 0px 10px;">
                            </td> 
                        </tr>
                    </table>
                    <table width="470" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;"> 
                        <tr>
                        <td align="center" valign="top" width="470" >
                                <p style="text-align: center; font-size: 12px; font-family: Helvetica, Arial; padding: 0px, 115px, 0px, 115px;"><a href="mailto:charlotte.naish@nelsonbostockunlimited.com?Subject=Talent%20Academy" style="color: #000!important;  text-decoration: none;"><strong>charlotte.naish@nelsonbostockunlimited.com</strong></p>
                            </td>
                        </tr>
                    </table>

                    <!--[if mso]>
                        <center>
                        <table><tr><td width="700">
                        <![endif]-->



                </td>
            </tr>

        </table>
    </body>

Original design
Outlook

我正在为HTML电子邮件编写代码。我为每个width设置了max-width和table，但table并未坚持指定的width。

这导致Outlook中出现特殊问题。我已经取消了px个值（看过上一篇建议的帖子）以及过于具体margin s！

有没有人有任何建议？

请参阅下面的代码：

<!DOCTYPE html> 
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=600" />
            <title>Talent Academy Newsletter</title>
        </head>
    </html>

    <body leftmargin="0" rightmargin="0" topmargin="0" marginheight="0" style="width: 100% !important; background-color: #FFF; margin:0!important;">
        <table max-width="700" align="center" cellpadding="0" cellspacing="0" leftmargin="0" rightmargin="0" topmargin="0" marginheight="0"> <!-- // wrapping table // --> 
            <tr>
                <td width="700" align="center" valign="top"> 
                    <table width="700" cellpadding="0" cellspacing="0"><!-- // not displaying properly & welcome banner table // -->  
                        <tr> 
                            <td align="center" valign="middle" width="700" style="background-color: #e7e7e7; height: 25; text-align: center; font-size: 10px; font-family: Arial, Helvetica; color: #000;">
                                <p>Is Outlook ruining this pretty email? Click <strong>here</strong></p>  <!--**add link here when on FTP**--> 
                            </td>
                        </tr>
                        <tr> 
                            <td align="center" valign="top" width="700" style="display: block; padding: 0;"> <!-- // welcome banner here // --> 
                                <img src="images/welcome.png" alt="Welcome!" height="340" width="700"> 
                            </td>
                        </tr>
                    </table>
                    <table width="470" cellpadding="0" cellspacing="0" align="center" leftmargin="0" rightmargin="0" topmargin="0" marginheight="0"> <!-- // into copy here // --> <!--be wary of width size here: 470--> 
                        <tr>
                            <td align="center" valign="top" width="470" style="text-align: center; font-size: 18px; font-family: League Gothic, Arial; color: #000; padding-top: 15px;">
                                <p>1st edition <br> September 2016</p>
                            </td>
                        </tr>
                        <tr>
                            <td align="center" valign="top" width="470" style="text-align: center; font-size: 15px; font-family: Helvetica, Arial; color: #000; padding: 0px, 115px, 0px, 115px;"> <!--used another td as dif font/size --> 
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra justo sed turpis rutrum, non molestie velit vehicula. Suspendisse sed est nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sem odio, viverra eu velit vitae, posuere blandit orci. Integer placerat tempus tortor in pretium. Donec vitae magna et tortor maximus pulvinar vitae et magna. Nam aliquam molestie commodo.</p>
                            </td>
                        </tr>
                    </table>
                    <table width="700" cellpadding="0" cellspacing="0" align="center" leftmargin="0" rightmargin="0" topmargin="0" marginheight="0">
                        <tr max-width="700">
                            <td max-width="700" align="center" valign="top" width="700" style="display: block; padding-top: 30px; padding-bottom:50px;">
                                <img src="images/fever.png" alt="Welcome!" height="79" width="79">
                                <img src="images/nb.png" alt="Welcome!" height="79" width="79">
                                <img src="images/nbg.png" alt="Welcome!" height="79" width="79">
                                <img src="images/mw.png" alt="Welcome!" height="79" width="79">
                            </td> 
                        </tr>
                    </table>
                    <table width="700" cellpadding="0" cellspacing="0" align="center" leftmargin="0" rightmargin="0" topmargin="0" marginheight="0">
                        <tr>
                            <td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
                                <img src="images/internal.png" alt="Internal Training" height="85" width="700">
                            </td>
                        </tr>
                        <tr max-width="700"> 
                            <td width="260" style="display: inline-block; padding: 40px 63.5px 30px 20px;"> <!-- // bottom two //--> 
                                <p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>  
                                <img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
                                <img src="images/fever2.png" alt="NB" height="35" width="32" align="right">
                            </td>
                            </td>
                            <td width="3" style="display: inline-block; padding-top: 40px; padding-bottom: 30px;">
                                <img src="images/line1.png" alt="" height="200" width="3"> 
                            </td>
                            <td width="260" style="display: inline-block; padding: 40px 20px 30px 63.5px;"> 
                                <p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p> 
                                <img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
                                <img src="images/nbg2.png" alt="NB" height="35" width="32" align="right">
                            </td>
                        </tr>
                        <tr max-width="700"> 
                            <td width="260" style="display: inline-block; padding: 40px 63.5px 30px 20px;"> <!-- // bottom two //--> 
                                <p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>  
                                <img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
                                <img src="images/fever2.png" alt="NB" height="35" width="32" align="right">
                            </td>
                            </td>
                            <td width="3" style="display: inline-block; padding-top: 40px; padding-bottom: 30px;">
                                <img src="images/line1.png" alt="" height="200" width="3"> 
                            </td>
                            <td width="260" style="display: inline-block; padding: 40px 20px 30px 63.5px;"> 
                                <p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p> 
                                <img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
                                <img src="images/nbg2.png" alt="NB" height="35" width="32" align="right">
                            </td>
                        </tr>
                    </table>
                    <table width="700" cellpadding="0" cellspacing="0" align="center" leftmargin="0" rightmargin="0" topmargin="0" marginheight="0"> <!-- // start of external training section // --> 
                        <tr max-width="700">
                            <td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
                                <img src="images/external.png" alt="Internal Training" height="85" width="700"> <!-- // banner image // --> 
                            </td>
                        </tr>
                        <tr max-width="700"> 
                            <td width="260" style="display: inline-block; padding: 5px 63.5px 30px 20px;"> <!-- // bottom two //--> 
                                <p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p> 
                            </td>
                            <td width="3" style="display: inline-block; padding-top: 5px; padding-bottom: 30px;">
                                <img src="images/line1.png" alt="" height="150" width="3"> 
                            </td>
                            <td width="260" style="display: inline-block; padding: 5px 20px 30px 63.5px;"> 
                                <p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>  
                            </td>
                        </tr>
                    </table>
                    <table width="700" cellpadding="0" cellspacing="0" align="center" leftmargin="0" rightmargin="0" topmargin="0" marginheight="0">
                        <tr>
                            <td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
                                <img src="images/dare.png" alt="Internal Training" height="85" width="700"> <!-- // banner image // --> 
                            </td>
                        </tr>
                        <tr> 
                            <td width="380" style="display: inline-block; padding: 5px 0px 30px 20px;"> 
                                <p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>PELLENTESQUE HABITANT TRISTIQUE</strong><br>Nam at auctor ante. Integer finibus nisl at euismod iaculis. Proin eleifend nunc ante, hendrerit semper felis pellentesque non. Etiam id quam metus. Ut pretium congue turpis ullamcorper tempus. Vivamus finibus elit ipsum, sit amet egestas dolor condimentum nec.<br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p> 
                                <img src="images/icon_mail.png" alt="" height="26" width="33">
                                <img src="images/icon_web.png" alt="" height="31" width="31">
                            </td>
                            <td max-width="300" style="display: inline-block; padding: 0px 0px 0px 60px">
                                <img src="images/circle_right.png" alt="Dare to Share" height="255" width="240">
                            </td>
                        </tr>
                        <tr>
                            <!-- artwork the circle to reflect the one above --> 
                        </tr>
                    </table>



                </td>
            </tr>

        </table>
    </body>

Answer 1

max-width不是您在元素上设置的属性，它是您在style属性中设置的CSS属性（如果您没有制作电子邮件，则在CSS类中设置））。

尝试将<table max-width="700"...更改为<table width="100%" style="max-width:700px;"...。

您还需要设置标准width，因为并非所有电子邮件客户端都会尊重您的max-width。

关于max-width：https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

编辑：

您可以使用条件来定位Outlook中的布局：https://gist.github.com/elidickinson/5525752

<!--[if mso]>
 <center>
 <table><tr><td width="580">
<![endif]-->
 <div style="max-width:580px; margin:0 auto;">

 <p>This text will be centered and constrained to 580 pixels even on Outlook which does not support max-width CSS</p>

 </div>
<!--[if mso]>
 </td></tr></table>
 </center>
<![endif]-->

我在Outlook 2007中测试了上述代码，但它确实有用。此代码来自上面的github链接。

Answer 2

max-width是一个CSS属性，因此您无法将其用作HTML属性，并且它无法在Outlook 2007-2013中使用，因此请改用width。< / p>

查看更多信息here

Answer 3

您在上面的模板中使用了折旧样式的顶部。 leftmargin="0" rightmargin="0" topmargin="0" marginheight="0"应替换为CSS样式。

此外，您应该阅读CSS支持以及可以在不同电子邮件客户端中使用的内容：http://www.campaignmonitor.com/css/

HTML电子邮件表格宽度

3 个答案: