How to set the content width for Outlook 2013 in a responsive mailing list via a conditional comment?

S

Stanislav2021-02-24 18:02:56

Outlook

Stanislav, 2021-02-24 18:02:56

Unable to set table width to display correctly in Outlook 2013. Email displays fine everywhere except Outlook.
If you hardcode table width="600", then a horizontal scroll appears in mobile devices.
How to set content width for Outlook 2013 only in responsive mailing list via conditional comment?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>temp</title>
</head>
<body>
  <table align="center" style="border-collapse: collapse; margin-left: auto; margin-right: auto;">
    <tbody> 
      <tr>
        <td colspan="2" align="center">
          <img style="max-width: 600px; width: 100%; height: auto;" src="https://cdn.pixabay.com/photo/2021/02/13/21/43/field-6012856_960_720.jpg" alt="img">
        </td>
      </tr>
    </tbody>
  </table>

  <br>
  <table align="center" style="max-width: 600px; width: 100%; border-collapse: collapse; margin-left: auto; margin-right: auto; background-color: #ffffff;">
    <tbody>
      <tr style="table-layout: fixed;">
        <td colspan="2" style="padding-top: 30px; text-align: center; font-weight: 700;">
          <font style="font-size: 16px; font-family: arial, sans-serif; padding-bottom: 15px;"><span>Здравствуйте, Дмитрий Вячеславович!</span></font>
        </td>
        <td></td>
      </tr>
      <tr>
        <td colspan="2" style="padding-bottom: 30px; text-align: center;">
          <font style="font-size: 16px; font-family: arial, sans-serif;">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum officia, nam quia?<br> Подробности в каждой новости по клику
          </span></font>
        </td>
        <td></td>
      </tr>
    </tbody>
  </table>
   
  <br> 
  <table align="center" style="max-width: 600px; width: 100%; border-collapse: collapse; margin-left: auto; margin-right: auto; background-color: #ffffff;">
    <!--[if gte mso 9]>
    <table border="0" cellpadding="0" cellspacing="0" width="400" style="margin:0; padding:0"><tr><td>
    <![endif]-->
    <tbody>
      <tr style="">
        <td style="padding-left: 15px;"><font style="font-size: 16px; font-family: arial, sans-serif; font-weight: bold;"><span>СОБЫТИЯ</span></font></td>
        <td style="padding-right: 15px;"><hr></td>
      </tr>
      <tr>
        <td style="padding-left: 15px; padding-right: 10px;; padding-top: 15px;">
          <img style="width: 100%; max-width: 120px; min-width: 120px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQX2ePta_NsYHklyiMsPNDexFvaXqMpuUtE_w&usqp=CAU" alt="">
        </td>
        <td style="vertical-align: text-top; padding-top: 15px;">
          <font style="font-size: 16px; font-family: arial, sans-serif;">
            <span display:inline-block;>Lorem ipsum, dolor sit amet consectetur, adipisicing elit. Officia, omnis?</span>
          </font>
        </td>
      </tr>
      <tr>
        <td style="padding-left: 15px; padding-right: 10px; padding-top: 15px;">
          <img style="width: 100%; max-width: 120px; min-width: 120px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQX2ePta_NsYHklyiMsPNDexFvaXqMpuUtE_w&usqp=CAU" alt="">
        </td>
        <td style="vertical-align: text-top; padding-top: 15px;">
          <font style="font-size: 16px; font-family: arial, sans-serif;">
            <span style="display:inline-block;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis quas quis eligendi.</span>
          </font>
        </td>
      </tr>
    </tbody>
    <!--[if gte mso 9]>
    </td></tr></table>
    <![endif]-->
  </table>
</body>
</html>

Content is moving around in Outlook 2013. I'm attaching a screenshot.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

B

Burnedheart, 2021-02-24
@zalman2

Try this:
https://gist.github.com/elidickinson/5525752