HTML 电子邮件表格宽度

【问题标题】：HTML email table widthsHTML 电子邮件表格宽度
【发布时间】：2016-09-02 23:44:22
【问题描述】：

更新（工作）代码：

<!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 电子邮件编写代码。我为每个table 设置了width 和max-widths，但是table 并没有坚持指定的width。

这会导致 Outlook 出现特定问题。我已经去掉了px 的值（看到以前的帖子提出了这个建议）以及对margins 过于具体！

有人有什么建议吗？

请参阅下面的代码：

<!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>

【问题讨论】：

  • max-width 属性在 Outlook 中不起作用，因此请将其更改为 width
  • 我要告诉你一些不幸的消息，Outlook 的大多数电子邮件样式/css 将被忽略或修改
  • 谢谢大家！我改变了我的最大宽度。现在阅读 CSS :)

标签： html css html-table html-email


【解决方案1】：

max-width 是 CSS 属性，因此不能将其用作 HTML 属性，并且在 Outlook 2007-2013 中也不起作用，因此请改用 width。

查看更多信息here

【讨论】：

  • @RachaelNichols 发生了什么将答案取消勾选为已接受？有什么不工作？
  • 是的，不幸的是没有！我取出了最大宽度，但我仍然看到 Outlook 中的 col 宽度发生了变化
  • - 我已经在帖子中上传了图片，所以你可以看到:)
  • 我已经做到了 :) 感谢您的帮助以及我认为它有所作为的其他事情！我认为新鲜的眼睛肯定有帮助。
  • 刚到这里。想展示/讲述你的不同之处吗？
【解决方案2】：

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

尝试将&lt;table max-width="700"... 更改为&lt;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 链接。

【讨论】：

  • 谢谢你，这样一个有用的答案 :) 现在看看这些 - 会让你知道我的进展！
  • @RachaelNichols 很高兴为您提供帮助。
【解决方案3】：

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

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

【讨论】：

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode