我的HTML电子邮件模板正确显示，没有Gmail，Yahoo，Apple Mail和iOS Mail中的重大问题。然而，展望是一个可怕的混乱，我不能为我的生活弄清楚我做错了什么？
问题是我的布局中的每个表都延伸到100％，尽管我将容器设置为600px。
任何人都可以帮我弄清楚如何将所有内容保存在600px容器中吗？
以下是代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introducing Neck Firming Complex</title>
<style type="text/css">
body {
margin: 0;
background-color:#f2f2f2;
}
body, table, td, p, a, li, blockquote {
-webkit-text-size-adjust: none!important;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: 400;
}
p{
line-height:1.8 !important;
}
table{
border-collapse:collapse;
}
img,a img{
border:0;
outline:none;
text-decoration:none;
}
.plusList{
list-style-image:url(https://gallery.mailchimp.com/2e923957e144aaa5ad2a794ad/images/a4f776c6-7a65-403f-ae36-3345646d9b79.png);
}
@media screen and (max-width:480px) {
/*styling for objects with screen size less than 480px; */
body, table, td, p, a, li, blockquote {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-family: Tahoma, Ariel, sans-serif;
}
table {
/* All tables are 100% width */
width: 100% !important;
max-width:480px !important;
border-style: none !important;
}
.footer {
/* Each footer column in this case should occupy 100% width and 4% is allowed for email client padding*/
height: auto !important;
max-width: 100% !important;
width: 100% !important;
}
.responsiveImage {
/* Container for each image now specifying full width */
height: auto !important;
max-width: 100% !important;
width: 100% !important;
}
.responsiveContent {
/* Content in catalog occupying full width of cell */
height: auto !important;
max-width: 100% !important;
width: 100% !important;
text-align:center!important;
margin:0 auto!important;
}
.responsiveHide{
display:none;
}
.socialTop{
display:none;
}
.btn{
padding:10px 60px !important;
}
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="margin: 0;padding: 0;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #F2F2F2;height: 100% !important;width: 100% !important;">
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="background-color:#F2F2F2;"><table width="600px" align="center" cellpadding="0" cellspacing="0" style="width:600px;max-width:600px;">
<!-- Main Wrapper Table with initial width set to 600px -->
<tbody>
<tr>
<td align="center" style="background-color:#FFF;max-width:600px;"><table width="292" align="left" cellpadding="2" cellspacing="0" style="padding:10px 10px 10px 10px;" class="responsiveHide">
<!-- First header column with Logo -->
<tbody>
<tr>
<td align="left" valign="bottom" style="font-size: 9px; color:#7d868c; text-align:left; font-family: Tahoma, Arial, Helvetica, sans-serif;">It’s not all about the face – a surprising way to look younger</td>
</tr>
</tbody>
</table>
<table class="responsiveContent" width="292" align="left" cellpadding="2" cellspacing="0" style="padding:10px 10px 10px 10px; text-align:right">
<!-- Second header column with social media -->
<tbody>
<tr>
<td align="right" valign="bottom" style="font-size: 9px; color:#7d868c; text-align:right; font-family: Tahoma, Arial, Helvetica, sans-serif;"><a href="#" style="color:#7d868c;">View this email in your browse</a>r</td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td style="font-size: 0; line-height: 0;background-color:#84cace;" height="4"><table width="100%" align="left" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 0; line-height: 0;background-color:#84cace;" height="4"><img src="https://gallery.mailchimp.com/2e923957e144aaa5ad2a794ad/images/34c8e5c0-4ecc-4a4d-b2d2-d58f42426bda.gif" width="1" height="1" alt=""/></td>
</tr>
</table></td>
</tr>
<tr style="background-color:#FFF;">
<td align="center" style="max-width:600px;"><table width="290" align="left" cellpadding="8" cellspacing="0" class="responsiveContent">
<!-- First header column with Logo -->
<tbody>
<tr>
<td align="left" valign="middle" style="font-size: 13px; color:#7d868c; text-align:left; font-family: Tahoma, Arial, Helvetica, sans-serif;" class="responsiveContent"><a href="http://www.lifelineskincare.com/"><img src="https://gallery.mailchimp.com/2e923957e144aaa5ad2a794ad/images/5083d1e0-d14d-4025-8316-ffc7c24b3675.png" width="252" height="57" alt="Lifeline Skin Care" style="border:0;"/></a></td>
</tr>
</tbody>
</table>
<table width="290" height="57" align="left" cellpadding="8" cellspacing="0" style="text-align:right" class="socialContent">
<!-- Second header column with social media -->
<tbody>
<tr class="socialTop">
<td align="right" valign="top" style="font-size: 13px; color:#7d868c; text-align:right; font-family: Tahoma, Arial, Helvetica, sans-serif; width:100%;">
<table border="0" align="right" cellpadding="2" cellspacing="0" width="112" class="socialTop">
<tbody>
<tr>
<td width="28"><a href="https://www.facebook.com/LifelineSkincare"><img src="https://gallery.mailchimp.com/2e923957e144aaa5ad2a794ad/images/b90f4ac4-16cd-49c1-88e2-da7703297bdc.png" width="24" height="24" alt="Like us on Facebook" style="border:0;"/></a></td>
<td width="28"><a href="https://twitter.com/LifelineSkin"><img src="https://gallery.mailchimp.com/2e923957e144aaa5ad2a794ad/images/61ac3d96-25a7-4767-b585-d6ef1e8429d0.png" width="24" height="24" alt="Follow us on Twitter" style="border:0;"/></a></td>
<td width="28"><a href="https://instagram.com/lifelineskin/"><img src="https://gallery.mailchimp.com/2e923957e144aaa5ad2a794ad/images/bf49f5a2-42d7-471f-96aa-1f96110d4d5b.png" width="24" height="24" alt="Love us on Instagram" style="border:0;"/></a></td>
<td width="28"><a href="https://www.pinterest.com/lifelinesc/"><img src="https://gallery.mailchimp.com/2e923957e144aaa5ad2a794ad/images/8dd75190-e598-4a0a-90e1-c145467f53d1.png" width="24" height="24" alt="Follow us on Pinterest" style="border:0;"/></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="right" valign="bottom" class="responsiveContent" style="font-size: 13px; color:#7d868c; text-align:right; font-family: Tahoma, Arial, Helvetica, sans-serif;"><table border="0" align="right" cellpadding="0" cellspacing="0" class="responsiveContent">
<tbody>
<tr>
<td><span style="font-size: 13px; color:#7d868c; font-family: Tahoma, Arial, Helvetica, sans-serif;"><a href="http://www.lifelineskincare.com/" style="font-size: 10px; color:#7d868c; font-family: Tahoma, Arial, Helvetica, sans-serif;text-decoration: none;">HOME</a> | <a href="http://www.lifelineskincare.com/press/" style="font-size: 10px; color:#7d868c; font-family: Tahoma, Arial, Helvetica, sans-serif;text-decoration: none;">PRESS</a> | <a href="http://www.lifelineskincare.com/stem-cell-skin-cream-sample/" style="font-size: 10px; color:#7d868c; font-family: Tahoma, Arial, Helvetica, sans-serif;text-decoration: none;">REQUEST A SAMPLE</a> | <a href="http://www.lifelineskincare.com/buy.html" style="font-size: 10px; color:#84cace; font-family: Tahoma, Arial, Helvetica, sans-serif;text-decoration: none;">SHOP</a> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><table width="100%" align="center" cellpadding="0" cellspacing="0" class="responsiveImage" style="max-width:600px;">
<tr>
<td><a href="http://www.lifelineskincare.com/buy/neck-firming-complex.html"><img src="https://gallery.mailchimp.com/2e923957e144aaa5ad2a794ad/images/f3edc992-b5cf-4222-96fe-2e404d19187e.jpg" width="600" style="max-width: 600px;border:0;" alt="Introducing Neck Firming Complex
" class="responsiveImage"/></a></td>
</tr>
</table></td>
</tr>
<tr>
<!-- HTML Spacer row -->
<td style="font-size: 0; line-height: 0;background-color:#84cace;" height="10"><table width="100%" align="left" cellpadding="0" cellspacing="0">
<tr>
<td style="max-width:600px;font-size: 0; line-height: 0;background-color:#84cace;" height="10"><img src="https://gallery.mailchimp.com/2e923957e144aaa5ad2a794ad/images/34c8e5c0-4ecc-4a4d-b2d2-d58f42426bda.gif" width="1" height="1" alt=""/></td>
</tr>
</table></td>
</tr>
<tr>
<td style="background-color:#FFF;"><table width="100%" align="left" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
<tr>
<!-- Row container for Content -->
<td align="left" style="text-align:left; padding:10px 20px 0px 20px;max-width:600px;" >
<h1 style="font-family:Tahoma, Arial, Helvetica, sans-serif;margin:0;padding:0;font-size:14px; color:#7d868c;">Lifeline Skin Care introduces its newest age-defying beauty product…<br>
<span style="font-size:24px; color:#84cace;text-transform:uppercase;font-weight:normal;font-family:Tahoma, Arial, Helvetica, sans-serif;">
Neck Firming Complex</span></h1>
<hr size="1" color="#84cace" noshade style="display: block; height: 1px; border: 1px solid #84cace; line-height:125%;" />
<p style="font-size: 13px; font-style: normal; color:#7d868c; line-height:125%; text-align:left; font-family:Tahoma, Arial, Helvetica, sans-serif;"><a href="http://www.lifelineskincare.com/"><img src="https://gallery.mailchimp.com/2e923957e144aaa5ad2a794ad/images/0e17c58f-8b1a-4484-a64f-8ca9928fed43.jpg" width="188" height="187" hspace="10" align="right" alt="Neck Firming Complex" style="float:right;border:0;" class="responsiveHide"/></a>Is your neck pre-maturely aging you? Do you avoid low-cut blouses and dresses because you’re ashamed of the blotchiness, the creases and wrinkles, the loose and sagging skin of your neck and décolleté? Well, you can kiss those scarves and high-neck shirts goodbye! Lifeline has created a remarkably effective Neck Firming Complex to renew the look and feel of your most delicate skin.</p>
<p style="font-size: 13px; font-style: normal; color:#7d868c; line-height:125%; text-align:left; font-family:Tahoma, Arial, Helvetica, sans-serif;">Visibly smooth away wrinkles and promote elasticity of the neck and décolleté with this deeply hydrating and restorative complex.</p>
<p style="font-size: 13px; font-style: normal; color:#7d868c; line-height:125%; text-align:left; font-family:Tahoma, Arial, Helvetica, sans-serif;">This powerful formula, using peptides derived from non-embryonic stem cells, along with highly potent specialized ingredients, including dynamic moisturizers, Lifeline’s Neck Firming Complex restores the appearance of firmer, smoother, and younger looking neck, while also providing a healthy looking and even skin tone.</p>
<hr size="1" color="#84cace" noshade style="display: block; height: 1px; border: 1px solid #84cace;" />
<p style="font-size:14px; color:#84cace; font-weight:bold;">Results you’ll see when you use Neck Firming Complex by Lifeline Skin Care:</p>
</td>
</tr>
<tr>
<td align="left" style="text-align:left; padding:10px 20px 0px 20px; "><table width="140" border="0" cellspacing="0" cellpadding="0" align="left" class="responsiveContent">
<tbody>
<tr>
<td class="responsiveContent"><img src="https://gallery.mailchimp.com/2e923957e144aaa5ad2a794ad/images/1c5e8ba1-fbd4-46f9-9372-6003aad5f0d7.jpg" width="129" height="167" alt="Neck Firming Complex" style="border:0;"/></td>
</tr>
</tbody>
</table>
<table width="392" border="0" cellspacing="0" cellpadding="0" align="left" class="responsiveContent">
<tbody>
<tr>
<td class="responsiveContent"><ul class="plusList" style="list-style-type:square;">
<li style="font-size: 13px; font-style: normal; color:#7d868c; line-height:125%; text-align:left; font-family:Tahoma, Arial, Helvetica, sans-serif;"><strong>Visibly Firms, lifts and tightens delicate skin</strong></li>
<li style="font-size: 13px; font-style: normal; color:#7d868c; line-height:125%; text-align:left; font-family:Tahoma, Arial, Helvetica, sans-serif;"><strong> Balances Skin Tone</strong></li>
<li style="font-size: 13px; font-style: normal; color:#7d868c; line-height:125%; text-align:left; font-family:Tahoma, Arial, Helvetica, sans-serif;"><strong> Minimizes discoloration and redness of skin for a
more even looking tone </strong></li>
<li style="font-size: 13px; font-style: normal; color:#7d868c; line-height:125%; text-align:left; font-family:Tahoma, Arial, Helvetica, sans-serif;"><strong>Supports cell renewal</strong></li>
<li style="font-size: 13px; font-style: normal; color:#7d868c; line-height:125%; text-align:left; font-family:Tahoma, Arial, Helvetica, sans-serif;"><strong> Boosts Collagen Production</strong></li>
<li style="font-size: 13px; font-style: normal; color:#7d868c; line-height:125%; text-align:left; font-family:Tahoma, Arial, Helvetica, sans-serif;"><strong> Minimizes the appearance of fine line and creases</strong></li>
</ul></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" style="font-size: 13px; font-style: normal; color:#7d868c; line-height:125%; text-align:left; padding:10px 20px 0px 20px; font-family:Tahoma, Arial, Helvetica, sans-serif;">
<hr size="1" color="#84cace" noshade style="clear:both; display: block; height: 1px; border: 1px solid #84cace;" />
<p style="font-size: 13px; font-style: normal; color:#7d868c; line-height:125%; text-align:left; font-family:Tahoma, Arial, Helvetica, sans-serif;">The next time you put on that stunning V-neck top, you’ll be proud to stick your neck out amongst the crowd. And let’s face it…when you look good, you feel great!</p>
<table width="50%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: separate !important; border: 2px none #84cace;border-radius: 5px;background-color: #84cace; margin:0 auto;">
<tbody>
<tr>
<td align="center" style="padding:16px;"><a href="http://www.lifelineskincare.com/buy.html" class="btn" style="font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;padding:10px 80px;">SHOP NOW »</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" align="left" cellpadding="0" cellspacing="0" class="responsiveImage" style="max-width:600px;">
<tr>
<td><a href="http://www.lifelineskincare.com/customer-service/lifeline-skin-care-autodelivery"><img src="https://gallery.mailchimp.com/2e923957e144aaa5ad2a794ad/images/148283d9-257f-4cb5-b1fc-9878edf34cc1.jpg" width="600" style="max-width:600px;border:0;" alt="Save time and money with Auto-Ship" class="responsiveImage"/></a></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" height="60px" style="padding:20px;background-color:#FFF;max-width:600px;">
<table class="socialBtm" border="0" align="center" cellpadding="2" cellspacing="0" width="112" style="width:112px !important;">
<tbody>
<tr>
<td width="28" style="width:28px !important;"><a href="https://www.facebook.com/LifelineSkincare"><img src="https://gallery.mailchimp.com/2e923957e144aaa5ad2a794ad/images/b90f4ac4-16cd-49c1-88e2-da7703297bdc.png" width="24" height="24" alt="Like us on Facebook" style="border:0;"/></a></td>
<td width="28" style="width:28px !important;"><a href="https://twitter.com/LifelineSkin"><img src="https://gallery.mailchimp.com/2e923957e144aaa5ad2a794ad/images/61ac3d96-25a7-4767-b585-d6ef1e8429d0.png" width="24" height="24" alt="Follow us on Twitter" style="border:0;"/></a></td>
<td width="28" style="width:28px !important;"><a href="https://instagram.com/lifelineskin/"><img src="https://gallery.mailchimp.com/2e923957e144aaa5ad2a794ad/images/bf49f5a2-42d7-471f-96aa-1f96110d4d5b.png" width="24" height="24" alt="Love us on Instagram" style="border:0;"/></a></td>
<td width="28" style="width:28px !important;"><a href="https://www.pinterest.com/lifelinesc/"><img src="https://gallery.mailchimp.com/2e923957e144aaa5ad2a794ad/images/8dd75190-e598-4a0a-90e1-c145467f53d1.png" width="24" height="24" alt="Follow us on Pinterest" style="border:0;"/></a></td>
</tr>
</tbody>
</table>
<p style="font-size: 10px; font-style: normal; color:#84cace; line-height:125%; text-align:center; font-family:Tahoma, Arial, Helvetica, sans-serif;">Copyright © 2015 Lifeline Skin Care. All Rights Reserved.</p></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</body>
</html>
答案 0 :(得分：2)
我相信你的问题是：
table width="100%"
在这种情况下，父容器实际上是没有设置宽度的主体。您应该在表格上设置600px的宽度。
答案 1 :(得分：0)
你应该发现这个有用：
<body style="margin: 0; padding :0;">
<table style="width: 100%;">
<tr>
<td>
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
我遗漏了您的自定义标记，但这会给您一般的想法。