HTML 电子邮件 table 宽度
HTML email table widths
更新（工作）代码：
<!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>
我正在为 HTML 电子邮件编写代码。我已经为每个 table 设置了 width 和 max-widths 但是 table 没有坚持指定的 width.
这会导致 Outlook 出现特殊问题。我已经删除了 px 值（看到之前的 post 暗示了这一点）以及过于具体 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 不是您在元素上设置的属性，它是您在 style 属性（或 CSS class 如果您不发送电子邮件）。
尝试将 <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 中测试了上面的代码并且它有效。这段代码来自上面githublink.
max-width 是 CSS 属性，因此您不能将其用作 HTML 属性，并且它在 Outlook 2007-2013 中不起作用，所以使用 width 代替。
查看更多信息here
您在上面的模板中使用了很多贬值样式。
leftmargin="0" rightmargin="0" topmargin="0" marginheight="0" 应替换为 CSS 样式。
您还应该阅读 CSS 支持以及可在不同电子邮件客户端中使用的内容：http://www.campaignmonitor.com/css/
更新（工作）代码：
<!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>
我正在为 HTML 电子邮件编写代码。我已经为每个 table 设置了 width 和 max-widths 但是 table 没有坚持指定的 width.
这会导致 Outlook 出现特殊问题。我已经删除了 px 值（看到之前的 post 暗示了这一点）以及过于具体 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 不是您在元素上设置的属性，它是您在 style 属性（或 CSS class 如果您不发送电子邮件）。
尝试将 <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 中测试了上面的代码并且它有效。这段代码来自上面githublink.
max-width 是 CSS 属性，因此您不能将其用作 HTML 属性，并且它在 Outlook 2007-2013 中不起作用，所以使用 width 代替。
查看更多信息here
您在上面的模板中使用了很多贬值样式。
leftmargin="0" rightmargin="0" topmargin="0" marginheight="0" 应替换为 CSS 样式。
您还应该阅读 CSS 支持以及可在不同电子邮件客户端中使用的内容：http://www.campaignmonitor.com/css/