Inlining issue on Outlook 2013/2016 on Windows

Question

Im trying to make these 6 inline columns be 3 per line on desktop and 2 on mobile.

Something in the Outlook ghost table code is causing all 6 to appear on one line and stretch the table. Ive tried hard width in td, max-widths, min-widths, etc. but nothing seems to work.

What it should look like:

How displaying in Outlook 2013/2016 Windows.

Code:

<html>
<head>
<meta charset="UTF-8">
<title>Hybrid Grid Master</title>
<style type="text/css">

  table td { border: 1px solid cyan;}
  @media only screen and (max-width: 600px) {
    .wrapper{width:95% !important;}
  }

</style>
</head>
<body style="margin:0; padding:0; background-color:#F8F8F8">
<center>

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F8F8F8" class="wrapper">
  <tr>
    <td align="center" valign="top" width="100%">
      <!--[if (gte mso 9)|(IE)]>
      <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
      <tr>
      <td align="center" valign="top" width="600">
      <![endif]-->
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" bgcolor="#FFFFFF">
        <tr>
          <td align="center" valign="top" style="font-size:0;">
            <!--[if (gte mso 9)|(IE)]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
            <tr>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td align="left" valign="top" width="195">
            <![endif]-->
            <div style="display:inline-block; max-width:195px; vertical-align:top; width:100%;">
              <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:195px;" class="deviceWidth">
                <tr>
                  <td align="center" valign="top" style="font-size:14px;">

                    Grid Three

                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->
          </td>
        </tr>
      </table>
      <!--[if (gte mso 9)|(IE)]>
      </td>
      </tr>
      </table>
      <![endif]-->
    </td>
  </tr>
</table>
</center>
</body>
</html>

score 0 · Answer 1 · answered Jun 17 '18 at 02:59

Outlook uses Word for rendering an HTML content. Take a look at the following articles that describe supported and unsupported HTML elements, attributes, and cascading style sheets properties:

Hope you will find them helpful.

score 0 · Accepted Answer · answered Jun 19 '18 at 20:10

0

I was able to resolve this by adding a in the Outlook ghost code. So it only breaks it to that for Outlook desktop clients which was where this was breaking.

answered Jun 19 '18 at 20:10

Richard Clifford

494
3
17

Inlining issue on Outlook 2013/2016 on Windows

2 Answers2