Outlook Ghost Tables: Multi-Column Emails That Don't Break

Why multi-column emails break in Outlook

Outlook Classic on Windows renders email with Microsoft Word, not a browser engine (the Outlook CSS support guide explains why). Word supports little of what you would reach for to build responsive columns:

• Not supporteddisplay:flex is not supported in Outlook Classic.
• Partialmax-width is partly supported in Outlook Classic.

Give it <div>s with max-width and it renders them full-width, stacked. What Word does understand is tables with fixed pixel widths. So the trick is to hand Outlook, and only Outlook, a table, while every other client gets the modern markup.

What an Outlook ghost table is

A ghost table is a table written inside MSO conditional comments, <!--[if mso]> ... <![endif]-->. Outlook Classic reads it; every other client sees a comment. How those comments work, and the [if !mso] form that does the reverse, is in MSO conditional comments and mso- CSS.

<!--[if mso]>
  <table role="presentation" width="600"><tr><td>
<![endif]-->
  ...content everyone sees...
<!--[if mso]>
  </td></tr></table>
<![endif]-->

That table exists only for Outlook. It is a "ghost": present in the source, but invisible to the clients that do not need it.

The fluid hybrid pattern: columns that stack without media queries

The modern half of the layout uses display:inline-block boxes that are width:100% up to a max-width:

<div style="display:inline-block;width:100%;max-width:300px;
            vertical-align:top;">
  ...column...
</div>

On a 600px-wide screen, two 300px-capped boxes sit side by side. On a narrow phone, they can't both fit, so the second wraps, and the columns stack. No media query required. It's called "fluid hybrid" (or the Campaign Monitor pattern) because it adapts to the available width on its own, and layers the ghost table underneath for Outlook. Media queries and the wider responsive strategy are in responsive email design.

A complete two-column ghost table

Put the two halves together and each column is an inline-block box for every client and a fixed-width table cell for Outlook Classic:

<!-- Two columns: inline-block for every client, a ghost table for Outlook Classic -->
<div style="font-size:0; line-height:0; text-align:center;">
  <!--[if mso]>
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0"><tr>
  <td width="300" valign="top">
  <![endif]-->
  <div style="display:inline-block; width:100%; max-width:300px;
              vertical-align:top; font-size:16px;">
    ...left column...
  </div>
  <!--[if mso]>
  </td><td width="300" valign="top">
  <![endif]-->
  <div style="display:inline-block; width:100%; max-width:300px;
              vertical-align:top; font-size:16px;">
    ...right column...
  </div>
  <!--[if mso]>
  </td></tr></table>
  <![endif]-->
</div>

Two mistakes that misalign ghost table columns

• The inline-block gap. Whitespace between inline-block elements renders as a visible gap. Set font-size:0 on the container and reset it on each column, and the gap disappears.
• Ghost table widths must match. The <td width="..."> values in the ghost table have to equal your column max-widths, or Outlook's columns won't line up with the design everyone else sees.

Generate the ghost table instead of hand-writing it

The pattern is fiddly: matching widths, nesting the conditionals, getting the font-size:0 reset right. Rather than assemble it by hand, generate it: the Outlook ghost table generator builds a fluid-hybrid layout for 1-4 columns with a live preview and copy-paste HTML.