Question

我在这个模板中花了很多时间，它是移动优化的，并且与dotMailer的easybuilder软件兼容，可以进行编辑。

当Outlook（dektop客户端）收到电子邮件时，它会水平扩展正确的宽度，并跟随一些元素。全宽的元素不会延伸（不是我希望它们延伸！）

我真的很感谢你们的帮助 - 请找到附带的截图和下面的代码片段（由于字符限制，我只会粘贴在标题/上部内容中）。

<style>.ReadMsgBody{width:100%}.ExternalClass{width:100%}#outlook a{padding:0}body{width:100%!important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin:0;padding:0}a img{border:0}a,a:visited,a:hover,a:active{color:inherit!important}img{outline:0;text-decoration:none;-ms-interpolation-mode:bicubic}.applelinks a{color:#333;text-decoration:none}.ExternalClass{width:100%!important}.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{line-height:100%}.ExternalClass img[class^=Emoji]{width:10px!important;height:10px!important;display:inline!important}@media only screen and (-webkit-min-device-pixel-ratio :1.5),only screen and (min-device-pixel-ratio :1.5),only screen and (max-device-width:480px){table[class~=hide],td[class~=hide],img[class~=hide],font[class~=hide]{display:none!important}td[class~=grey_border]{padding:5px!important;margin:0!important}td[class~=eem_frame]{padding:10px!important}table[class~=ee_element],table[class~=eeb_width],table[class~=eev_element]{width:100%!important}table[class~=eem_outerzone],td[class~=eem_outerzone]{max-width:640px!important;min-width:310px!important;width:100%!important}td[class~=ved-scaled-cols],table[class="ee_columns"]{display:block!important;clear:both!important;width:100%!important;margin:0!important;padding:10px!important}td[class~=ved-scaled-cols-screenshots],table[class="ee_columns_screenshots"]{display:block!important;clear:both!important;width:90%!important;padding:15px!important;margin-left:auto!important;margin-right:auto!important;align:center!important}td[class~=ved-scaled-cols-newsimages],table[class="ee_columns_newsimages"]{display:block!important;clear:both!important;width:90%!important;padding:15px!important;margin-left:auto!important;margin-right:auto!important;align:center!important}td[class~=ved-scaled-cols-button1],table[class="ee_columns_b1"]{display:block!important;clear:both!important;width:200px!important;padding-top:15px!important;padding-bottom:15px!important}td[class~=ved-scaled-cols-button2],table[class="ee_columns_button2"]{display:block!important;clear:both!important;width:100%!important;max-height:54px!important;padding:10px 20px 10px 0!important}img[class~=ee_editable]{height:auto!important;max-width:640px!important;width:100%!important}.ee_editable{width:100%!important;height:auto!important}.ee_columns>tbody>tr>td:not(.ee_dropzone),.ee_columns>tr>td:not(.ee_dropzone),.ee_columnstd:not(.ee_dropzone){display:inherit!important}.ee_columns_screenshots>tbody>tr>td:not(.ee_dropzone),.ee_columns_screenshots>tr>td:not(.ee_dropzone),.ee_columns_screenshotstd:not(.ee_dropzone){display:inherit!important}.ee_columns_newsimages>tbody>tr>td:not(.ee_dropzone),.ee_columns_newsimages>tr>td:not(.ee_dropzone),.ee_columns_newsimagestd:not(.ee_dropzone){display:inherit!important}table[class~="eem_stack320"],td[class~="eem_stack320"]{display:block!important;clear:both!important;min-width:320px!important;width:100%!important;margin:0!important;padding:0!important;alignment-adjust:central!important}.eem_stack{display:block!important;clear:both!important;width:100%!important;margin:0!important;padding:0!important}td[class~=eem_stack]{display:block!important;clear:both!important;width:100%!important;margin:0!important;padding:0}div[class~=center],div[class~=center] *{text-align:center!important;line-height:22px!important;margin-bottom:15px!important;font-size:18px!important}div[class~=left],div[class~=left] *{text-align:left!important;line-height:22px!important;margin-bottom:15px!important;font-size:18px!important}div[class~=right],div[class~=right] *{text-align:left!important;line-height:22px!important;margin-bottom:15px!important;font-size:18px!important}td[class~=eem_smallimage]{line-height:normal!important;height:auto!important}font[class~=title-text],table[class="title-text"]{line-height:22px!important;margin-bottom:15px!important;font-size:20px!important}font[class~=main-text],table[class="main-text"]{line-height:20px!important;margin-bottom:15px!important;font-size:18px!important}font[class~=section-title-text],table[class="section-title-text"]{line-height:26px!important;margin-bottom:15px!important;font-size:24px!important}font[class~=unsubscribe-text],table[class="unsubscribe-text"]{line-height:30px!important;padding-bottom:20px!important;font-size:24px!important}};.ee_editable{width:100%!important;height:auto!important}</style><style type="text/css">table{border-collapse:collapse}</style><table style="table-layout:auto"class="ee_mobiletemplate"bgcolor="#ffffff"border="0"cellpadding="0"cellspacing="0"width="100%"><tbody><tr><td><table class="eem_outerzone"style="border:1px solid rgb(153,153,153);table-layout:auto;"align="center"bgcolor="#e1e1e1"border="0"cellpadding="0"cellspacing="0"width="680"><tbody><tr><td class="grey_border"style="padding:18px;"><table style="width:640px;table-layout:auto"class="eem_outerzone" bgcolor="#e1e1e1"border="0"cellpadding="0"cellspacing="0"width="640"><tbody><tr><td style="padding:0px"class="ee_dropzone"width="640"><table style="width:640px;table-layout:auto"class="hide"bgcolor="#e1e1e1"border="0"cellpadding="0"cellspacing="0"width="640"><tbody><tr><td style="padding-right:5px;padding-bottom:5px"><table style="table-layout:auto"class="ee_customedit ee_sociallinks"data-title="Social sharing"data-edit="social"border="0" cellpadding="0" cellspacing="0"width="230"><tbody><tr><td class="ee_socialcontent"><div class="eesocial"><table style="table-layout:auto"border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="text-align:left;padding-right:5px"><a href="http://$SOCIALBOOKMARK$?b=4"><img title="Facebook"style="width:24px; height:24px;"src="https://my.dotmailer.com/cmpimg/sys/socnet/facebook.png" border="0"height="24"width="24"></a></td><td style="text-align:left;padding-right:5px"><a href="http://$SOCIALBOOKMARK$?b=36"><img title="GooglePlus"style="width:24px; height:24px;"src="https://my.dotmailer.com/cmpimg/sys/socnet/googleplus.png" border="0"height="24"width="24"></a></td><td style="text-align:left;padding-right:5px"><a href="http://$SOCIALBOOKMARK$?b=12"><img title="LinkedIn"style="width:24px; height:24px;"src="https://my.dotmailer.com/cmpimg/sys/socnet/linkedin2.png"border="0"height="24"width="24"></a></td><td style="text-align:left;padding-right:5px"><a href="http://$SOCIALBOOKMARK$?b=32"><img title="Twitter" style="width:24px;height:24px"src="https://my.dotmailer.com/cmpimg/sys/socnet/twitter.png"border="0"height="24"width="24"></a></td><td style="text-align:left;padding-right:5px"><a href="http://$SOCIALBOOKMARK$?b=1"><img title="Delicious"style="width:24px;height:24px;"src="https://my.dotmailer.com/cmpimg/sys/socnet/delicious.png"border="0"height="24"width="24"></a></td><td style="text-align:left;padding-right:5px"><a href="http://$SOCIALBOOKMARK$?b=3"><img title="reddit"style="width:24px;height:24px;"src="https://my.dotmailer.com/cmpimg/sys/socnet/reddit.png"border="0" height="24"width="24"></a></td><td style="text-align:left;padding-right:5px"><a href="http://$SOCIALBOOKMARK$?b=5"><img title="StumbleUpon"style="width:24px;height:24px;"src="https://my.dotmailer.com/cmpimg/sys/socnet/stumbleupon.png"border="0"height="24"width="24"></a></td></tr></tbody></table></div></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><table style="width:640px;table-layout:auto"class="eem_outerzone"bgcolor="#e1e1e1"border="0"cellpadding="0"cellspacing="0"width="640"><tbody><tr><td style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;border-left:1px solid #999;border-top:1px solid #999;border-bottom:1px solid #999;border-right:1px solid #999"class="ee_dropzone"width="640"><table style="width:640px;table-layout:auto"class="ee_element"border="0"cellpadding="0"cellspacing="0"width="100%"><tbody><tr><td class="hide"style="padding:0;width:210px"bgcolor="#000000"width="35%"><table class="ee_element"style="width:208px;table-layout:auto"border="0"cellpadding="0"cellspacing="0"width="208"><tbody><tr><td style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><img src="https://my.dotmailer.com/resources/handlers/dcimage.ashx?text=Sys - header logo - Corporate&amp;id=13743"></td></tr></tbody></table></td><td style="width:390px;padding-right:20px;padding-left:20px"bgcolor="#000000"><div style="padding-top:8px;text-align:right"class="ee_editable center"><font style="mso-table-lspace:0;mso-table-rspace:0;color:#f3fff1;font-size:15px;line-height:18px;font-family:Trebuchet MS,Arial,Helvetica,sans-serif">July 2013</font></div><div style="text-align:right"class="ee_editable hide"><img style="width:369px;height:56px"class="vedpw390"src="https://my.dotmailer.com/resources/handlers/dcimage.ashx?text=Sys - header forward and view in browser&amp;id=13746"border="0"width="369"height="56"></div></td></tr></tbody></table><table class="ee_element" style="width:640px" border="0" cellpadding="0" cellspacing="0" width="640"><tbody><tr><td class="eem_smallimage" style="padding:0;width:640px;line-height:6px" height="6"><img src="https://i.emlfiles.com/cmpimg/2011/44869/2977177_greendivider640.png" class="ee_editable vedpw640 ee_pnggif_image" style="display:block;width:640px;height:6px" border="0" width="640" height="6"></td></tr></tbody></table><table class="ee_element" style="width:640px;table-layout:auto;background-color:#fff" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td style="padding:0px;width:640px"><a href="#"target="_blank"><img src="/img.ashx?__i__=https://i.emlfiles.com/cmpimg/9/6/8/4/4/files/3578369_main_feature_graphic_640xany.png" alt="Main Feature Graphic"width="640"class="ee_editable vedpw640"style="display:block;width:640px;"align="middle"border="0"></a></td></tr></tbody></table><table style="width:640px;table-layout:auto"class="ee_element"border="0"cellpadding="0"cellspacing="0"width="100%"><tbody><tr><td style="padding:0;width:640px"><table class="ee_element"style="width:640px;table-layout:auto"bgcolor="#ffffff"border="0"cellpadding="0"cellspacing="0"width="100%"><tbody><tr><td style="padding:0;width:20px"rowspan="2"width="20"><img src="https://my.dotmailer.com/cmpimg/2011/44869/2876533_spacer.gif"style="display:block"height="10"width="20"></td><td style="padding:0;width:600px"width="100%"><div style="text-align:left" class="ee_editable"><font class="title-text" style="mso-table-lspace:0;mso-table-rspace:0;color:#76b900;font-size:15px;line-height:18px;font-family:Trebuchet MS,Arial,Helvetica,sans-serif;font-weight:bold;text-decoration:none;text-transform:uppercase"><a href="#"target="_blank"style="text-decoration:none;color:#76b900"><br>MAIN FEATURE</a></font></div><div style="text-align:left"class="ee_editable"><font class="main-text"style="mso-table-lspace:0;mso-table-rspace:0;font-size:12px;color:#000;line-height:14px;font-family:Trebuchet MS,Arial,Helvetica,sans-serif">Integer iaculis dapibus scelerisque. Quisque diam ligula, pulvinar at quam eget, volutpat adipiscing nulla. Ut et massa tempor, pharetra diam ac, eleifend quam. In rhoncus rhoncus elit a auctor. Aliquam erat volutpat. Quisque blandit nisl eget pretium sagittis. Praesent euismod urna ut commodo mollis. Phasellus lacinia orci at posuere bibendum. Curabitur imperdiet odio nunc, tempus consequat mauris fermentum a.<br/><br/>Morbi ac tellus felis. In libero orci, eleifend dictum tempus consequat, pellentesque nec nisi. Etiam vitae nisl tincidunt, dictum nisi in, condimentum nulla. Morbi euismod vestibulum urna sit amet venenatis.</font></div></td><td style="padding:0;width:20px"rowspan="2"width="20"><img src="https://my.dotmailer.com/cmpimg/2011/44869/2876533_spacer.gif"style="display:block"height="10"width="20"></td></tr><tr><td style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"class="ee_dropzone"bgcolor="#ffffff"width="100%"></td></tr></tbody></table></td></tr></tbody></table>

Answer 1

在您的第一个嵌套表中，您使用百分比和像素宽度的组合，并在html和css中声明。只需使用width=""，而不是css宽度。您也不需要任何<tbody>代码。

这应该让你开始：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">           
    /* Client-specific Styles */
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    a[href^="tel"], a[href^="sms"] { text-decoration: default; color: #000001 !important; pointer-events: auto; cursor: default;}
    table td {border-collapse: collapse;}
  </style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#F9F9F9" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td width="30">&nbsp;
    </td>
    <td width="540" height="60" valign="bottom">
nest your top table here.
    </td>
    <td width="30">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="30">&nbsp;
    </td>
    <td width="540" height="60" bgcolor="#000000" style="color: #FFFFFF;">
nest table in here if needed
    </td>
    <td width="30">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="30">&nbsp;
    </td>
    <td width="540" bgcolor="#FFFFFF">
<img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="540" height="400" alt="Main Graphic">
    </td>
    <td width="30">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="30">&nbsp;
    </td>
    <td width="540" bgcolor="#FFFFFF">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="30">&nbsp;
          </td>
          <td width="480" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
            &nbsp;<br>
            <font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #3c8a2e;">HEADER</font>
            <br><br>
            text at bottom
            <br>&nbsp;
          </td>
          <td width="30">&nbsp;
          </td>
        </tr>
      </table>
    </td>
    <td width="30">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="30">&nbsp;
    </td>
    <td width="540" height="30">
    </td>
    <td width="30">&nbsp;
    </td>
  </tr>
</table>

</td></tr></table></td></tr></table></body></html>

HTML电子邮件在Microsoft Outlook中水平扩展固定宽度

1 个答案: