Html Question posted in
Some basic documentation can be found here.

Html – Responsive table for Outlook

I need a table that adjusts to 100% of the screen width but does not exceed a maximum width of 700px for an Outlook email template.

For now I have the following code:

<table border="0" cellspacing="0" style="border-collapse:collapse; border-spacing:0; font-family:'montserrat','calibri'; font-size:13px; width:100%; max-width: 700px">
   <tbody>
      <tr>
         <td style="background-color:#0063af; padding:0; text-align:left; width:50%"><img alt="" height="81" src="path/to/img" width="378" /></td>
         <td style="background-color:#0063af; padding:0; text-align:right; width:50%"><img alt="" height="81" src="path/to/img" width="378" /></td>
      </tr>
      <tr>
         <td colspan="2" style="padding:10px"></td>
      </tr>
   </tbody>
</table>

I set max-width: 700px but when I resize, it exceeds this limit. If the screen is less than 700px wide, the menu needs to take 100% of the width. Otherwise, if the screen is larger than 700px, the maximum width of the menu should be 700px.

Tags:

2

Answers


  1. 0

    Your images aren’t shrinking with the available width. To fix this issue, use CSS to set width: 100%

    Normally you can use breakpoints to set width of your table as needed. In this case, as mentioned by tacoshy, you can’t use breakpoints in emails. To get around this, we can keep the max-width on your table and add width: 100% as well. This will ensure the table sizes only to the allowed width of the screen/window.

    <table border="0" cellspacing="0" style="border-collapse:collapse; border-spacing:0; font-family:'montserrat','calibri'; font-size:13px; width:100%; max-width: 700px; width: 100%">
   <tbody>
  <tr>
     <td style="background-color:#0063af; padding:0; text-align:left; width:50%"><img style="width: 100%" alt="" height="81" src="path/to/img" width="378" /></td>
     <td style="background-color:#0063af; padding:0; text-align:right; width:50%"><img style="width: 100%" alt="" height="81" src="path/to/img" width="378" /></td>
  </tr>
  <tr>
     <td colspan="2" style="padding:10px"></td>
  </tr>
   </tbody>
</table>
    Login or Signup to reply.
  2. 0

    Outlook desktop Windows doesn’t support max-width, dependent on version: https://www.caniemail.com/features/css-max-width/

    Wrap what you’ve got in conditional code that only Outlook will see:

    <!--[if mso]><table width="700" align="center" cellpadding="0" cellspacing="0" role="presentation"><tr><td style="padding:0;"><![endif]-->
...
<!--[if mso]></td></tr></table><![endif]-->
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search