Outlook ghost table generator
Multi-column email that survives Outlook is a two-layout problem. This builds a fluid-hybrid layout, inline-block columns that stack on mobile with no media query, plus an Outlook ghost table for fixed-width columns. Tune it, preview it, copy the HTML.
Columns sit side by side on desktop and stack on mobile, no media query needed. Outlook gets a ghost table so its fixed columns line up.
<div style="max-width:600px;margin:0 auto;background:#ffffff;font-size:0;">
<!--[if mso]>
<table role="presentation" width="600" align="center" cellspacing="0" cellpadding="0" border="0"><tr>
<![endif]-->
<!--[if mso]><td width="200" valign="top"><![endif]-->
<div style="display:inline-block;width:100%;max-width:200px;vertical-align:top;font-size:16px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td style="padding:20px 12px;background:#f6f4ef;font-family:Arial,sans-serif;color:#1a1a1a;line-height:1.5;">
Column 1
</td></tr>
</table>
</div>
<!--[if mso]></td><![endif]-->
<!--[if mso]><td width="200" valign="top"><![endif]-->
<div style="display:inline-block;width:100%;max-width:200px;vertical-align:top;font-size:16px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td style="padding:20px 12px;background:#f6f4ef;font-family:Arial,sans-serif;color:#1a1a1a;line-height:1.5;">
Column 2
</td></tr>
</table>
</div>
<!--[if mso]></td><![endif]-->
<!--[if mso]><td width="200" valign="top"><![endif]-->
<div style="display:inline-block;width:100%;max-width:200px;vertical-align:top;font-size:16px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td style="padding:20px 12px;background:#f6f4ef;font-family:Arial,sans-serif;color:#1a1a1a;line-height:1.5;">
Column 3
</td></tr>
</table>
</div>
<!--[if mso]></td><![endif]-->
<!--[if mso]></tr></table><![endif]-->
</div>Replace Column 1, Column 2… with your content. Keep the <!--[if mso]> comments. They're what makes Outlook behave.
Frequently asked questions
What is an Outlook ghost table?
A ghost table is a real <table> wrapped in <!--[if mso]> conditional comments, so only Outlook on Windows sees it. Outlook renders with Microsoft Word's engine, which ignores max-width and inline-block, so it needs fixed-width table cells to lay out columns. The ghost table gives it those without affecting any other client.
What is a fluid hybrid layout?
It's the technique this tool generates: columns built as display:inline-block boxes that are width:100% up to a max-width. On a wide screen they sit side by side; on a narrow screen they can't fit and wrap, so they stack, all without a single media query. The ghost table handles Outlook, and the inline-block boxes handle everyone else.
Why not just use a media query to stack columns?
Media queries work in most clients, but several, including some versions of Gmail and Outlook, strip or ignore them. The fluid hybrid pattern stacks based on available width alone, so it degrades gracefully everywhere. You can still layer media queries on top for finer control.
Why is there a font-size:0 on the container?
Inline-block elements render the whitespace between them as a visible gap. Setting font-size:0 on the container collapses that whitespace, and each column cell resets the font size for its content. It's a standard part of the hybrid pattern. Keep it.