Email template td widths change based on content in outlook only-CodePudding

I have a table containing two <td's> which are set to fixed widths but they seem to change depending on there content on outlook only...

If I put a test image in each <td'> they align fine and are equal width and the same if I put text in each but if I put a image in one and text in the other the image one grows and the text one shrinks despite the image being a fixed size to fit its container.

This only happens on outlook and looks fine on everything else:

Here is a link to litmus to see the issue:

https://litmus.com/checklist/emails/public/ef3ee40#ol2007

And below is the code with three examples which is the same structure but just different content:

<img'> <img'>

<img'> <text'>

<text'> <text'>.

<!--Section content starts here-->
<table align="left" valign="middle" width="660" border="0" cellspacing="0" cellpadding="0"  >

   <tr>
      <td align="center" valign="middle" width="660" >
         <table width="660" border="0" cellspacing="0" cellpadding="0" align="center" style="table-layout: fixed;" >
            <!--Two columns-->
            <tr>

               <td align="center" valign="middle" style="padding: 20px;border:1px solid black" width="290" >
                  <img  width="290" border="0" src="https://via.placeholder.com/290x290" style="display:block;border:none;width:100%;max-width:290px" />
               </td>

               <td align="center" valign="middle" style="padding: 20px;border:1px solid black" width="290" >
                  <img  width="290" border="0" src="https://via.placeholder.com/290x290" style="display:block;border:none;width:100%;max-width:290px" />
               </td>

            </tr>
         </table>
      </td>
   </tr>


   <tr>
      <td align="center" valign="middle" width="660" >
         <table width="660" border="0" cellspacing="0" cellpadding="0" align="center" style="table-layout: fixed;" >
            <!--Two columns-->
            <tr>

               <!--Left image section-->
               <td align="center" valign="middle" style="padding: 20px;border:1px solid black" width="290" >
                  <img  width="290" height="290" border="0" src="https://via.placeholder.com/290x290" style="display:block;border:none;width:100%;max-width:290px" />
               </td>

               <td align="left" valign="middle" style="padding: 20px;border:1px solid black" width="290" >
                  <p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;display:block;width:290px"> 
                     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>

                  <p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;">Take a look <a href="https://skyacomms.grouptreehosting.net/tracker.axd?t=620cced4b420f1b17e8f2d3e&u=https://www.skyacademystudios.com/" style="color:#eeabff;text-decoration: underline;font-weight:600;">here</a></p>
               </td>

            </tr>
         </table>
      </td>
   </tr>

 <tr>
      <td align="center" valign="middle" width="660" >
         <table width="660" border="0" cellspacing="0" cellpadding="0" align="center" style="table-layout: fixed;" >
            <!--Two columns-->
            <tr>

               <td align="left" valign="middle" style="padding: 20px;border:1px solid black" width="290" >
                  <p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;display:block;"> 
                     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>

                  <p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;">Take a look <a href="https://skyacomms.grouptreehosting.net/tracker.axd?t=620cced4b420f1b17e8f2d3e&u=https://www.skyacademystudios.com/" style="color:#eeabff;text-decoration: underline;font-weight:600;">here</a></p>
               </td>

               <td align="left" valign="middle" style="padding: 20px;border:1px solid black" width="290" >
                  <p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;display:block;"> 
                     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>

                  <p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;">Take a look <a href="https://skyacomms.grouptreehosting.net/tracker.axd?t=620cced4b420f1b17e8f2d3e&u=https://www.skyacademystudios.com/" style="color:#eeabff;text-decoration: underline;font-weight:600;">here</a></p>
               </td>

            </tr>
         </table>
      </td>
   </tr>
</table>

Thank you for any help anyone can offer.

CodePudding user response：

If you use percentages, that will work for Outlook (& everything else). I've also taken out the width of the <p> (290px), since the width is already set in the <td> and that might confuse something on mobiles that don't have that much space available.

<tr>
      <td align="center" valign="middle" width="660" >
         <table width="660" border="0" cellspacing="0" cellpadding="0" align="center" style="table-layout: fixed;" >
            <!--Two columns-->
            <tr>

               <!--Left image section-->
               <td align="center" valign="middle" style="padding: 20px;border:1px solid black" width="50%" >
                  <img  width="290" border="0" src="https://via.placeholder.com/290x290" style="display:block;border:none;width:100%;max-width:290px" />
               </td>

               <td align="left" valign="middle" style="padding: 20px;border:1px solid black" width="50%" >
                  <p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;display:block;"> 
                     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>

                  <p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;">Take a look <a href="https://skyacomms.grouptreehosting.net/tracker.axd?t=620cced4b420f1b17e8f2d3e&u=https://www.skyacademystudios.com/" style="color:#eeabff;text-decoration: underline;font-weight:600;">here</a></p>
               </td>

            </tr>
         </table>
      </td>
   </tr>

Also as an aside, for responsive images in mobile, you'll either want to remove the height attribute (height="290") or add in style="...height:auto;". Otherwise the height will remain the same even on mobiles and will get warped.

I did get it working with width="290" in there, but that doesn't work for mobiles. 50% means that mobiles are responsive, as their columns will only be about 150px (rule of thumb is about 300px wide for mobiles).