Koşullu yorumlama ile bile Outlook'taki tablo genişliği daha büyük

Question

Bir tabloyu bir e-postaya hücre içine yerleştirmeye çalışıyorum ve Outlook'ta iç tablonun genişliğini nasıl sınırlandıramayacağımı anlayamıyorum. "Karma Kodlama Yaklaşımını" (http://labs.actionrocket.co/the-hybrid-coding-approach) kullanmaya çalıştım ve THINK Outlook koşul deyimlerini doğru olarak denedim (http://labs.actionrocket.co/microsoft-outlook-conditional-statements). Mso için koşullu yorumlamayı gördüğüm birçok yer var, ancak e-postayı Litmus'ta test ettiğimde, Outlook hala bu dev dizi görüntüyü ortada gösteriyor. Neyi yanlış yapıyorum? Herhangi bir yardım büyük takdir edilecektir.

<table style="border-collapse: collapse; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: #777777;" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600"> 
<tbody> 
<tr> 
<td colspan="2" style="padding-top: 20px; padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" width="600"> 
<h2 style="font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; line-height: 27pt; color: #555555; font-weight: 300; margin-top: 0; margin-bottom: 15px !important; padding: 0;">April is always <span class="highlighted" style="color: #518fce;">#BetterWithStraw</span>!</h2> 
</td> 
</tr> 
<tr> 
<td colspan="2" style="padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" valign="top" width="255">Introductory text. 
<table style="border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="126"> 
<tbody> 
<tr></tr> 
</tbody> 
</table> 
</td> 
</tr> 
<tr> 
<td colspan="2" style="padding-top: 5px; font-size: 2px; line-height: 0px;" height="31" width="600"><img alt="" src="https://s3.amazonaws.com/AgileEmailTemplates/newsletter/rocketmail/Blue/Light-Background/images/divider.png" style="display: block;" align="left" height="31" hspace="0" border="0" vspace="0" width="600" /></td> 
</tr> 
</tbody> 
</table> 
<!-- End of content 1--> <!-- Start of content 2--> 

<table style="border-collapse: collapse; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: #777777;" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600"> 
<tbody> 
<tr> 
<td colspan="2" style="padding-top: 20px; padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" width="600"> 
<h2 style="font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; line-height: 27pt; color: #555555; font-weight: 300; margin-top: 0; margin-bottom: 15px !important; padding: 0;">Vote <span class="highlighted" style="color: #518fce;">here</span>!</h2> 
</td> 
</tr> 
<tr> 
<td colspan="2" style="padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" valign="top" width="255"> 

<!--[if mso> 
<table width="540" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td> 
<![endif]--> 

<table style="width: 100%;" align="center" cellpadding="0"> 
<tbody> 
<tr><th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514273836?id=tinymce_image_upload" width="100%" /></th></tr> 
<tr> 
<td><a href="http://www.google.com" target="new"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514291930?id=tinymce_image_upload" width="100%" /></a></td> 
<td><a href="http://www.yahoo.com" target="new"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514301534?id=tinymce_image_upload" width="100%" /></a></td> 
</tr> 
<tr> 
<td><a href="http://www.deadspin.com" target="new"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514313875?id=tinymce_image_upload" width="100%" /></a></td> 
<td><a href="http://www.bing.com" target="new"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514322076?id=tinymce_image_upload" width="100%" /></a></td> 
</tr> 
<tr><th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514330960?id=tinymce_image_upload" width="100%" /></th></tr> 
</tbody> 
</table> 

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

<div style="display: none;">&nbsp;</div> 
<table style="border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="126"> 
<tbody> 
<tr></tr> 
</tbody> 
</table> 
</td> 
</tr> 
<tr> 
<td colspan="2" style="padding-top: 5px; font-size: 2px; line-height: 0px;" height="31" width="600"><img alt="" src="https://s3.amazonaws.com/AgileEmailTemplates/newsletter/rocketmail/Blue/Light-Background/images/divider.png" style="display: block;" align="left" height="31" hspace="0" border="0" vspace="0" width="600" /></td> 
</tr> 
</tbody> 
</table> 

Teşekkür ederiz!

Answer 1

Sorun, Lotus Notes, Outlook 2003, 2010 ve 2016'nın herhangi bir görüntüde sabit genişliğe sahip olması gerektiğidir. 1280px genişliğinde bir retina görüntüsü eklerseniz ve genişliğini% 100 olarak ayarlarsanız, dış kutuyu yok sayar ve orijinal genişliğinin% 100'ü olur. Medya sorguları mobil

@media screen and (max-width: 480px) { 
    a img{ 
    max-width:100% !important; 
    width:100% !important; 
    } 
} 

için optimum hale ile daha sonra

<table style="width: 100%;" align="center" cellpadding="0"> 
       <tbody> 
        <tr> 
         <th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514273836?id=tinymce_image_upload" width="536" /></th> 
        </tr> 
        <tr> 
         <td> 
          <a href="http://www.google.com" target="new"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514291930?id=tinymce_image_upload" width="267" /></a> 
         </td> 
         <td> 
          <a href="http://www.yahoo.com" target="new"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514301534?id=tinymce_image_upload" width="267" /></a> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <a href="http://www.deadspin.com" target="new"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514313875?id=tinymce_image_upload" width="267" /></a> 
         </td> 
         <td> 
          <a href="http://www.bing.com" target="new"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514322076?id=tinymce_image_upload" width="267" /></a> 
         </td> 
        </tr> 
        <tr> 
         <th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514330960?id=tinymce_image_upload" width="536" /></th> 
        </tr> 
       </tbody> 
      </table> 

Ve: Peki yapmanız gereken böyle her görüntü üzerinde bir genişliğe yapmak olduğunu