Definition
A ghost table is a responsive email coding technique that leverages Outlook's inability to parse CSS display: none combined with its support for display: table in VML and conditional comments. The technique allows email developers to show or hide content conditionally for mobile versus desktop views, creating a responsive layout that works even in Outlook where standard media queries fail.
The ghost table works by creating two versions of content: one for desktop (visible in Outlook and wider viewports) and one for mobile (hidden in Outlook, visible when a media query applies). The desktop version uses a standard table with display: table which Outlook renders normally. The mobile version is wrapped in a conditional or uses display: none that Outlook ignores. When a mobile device's media query triggers, it hides the desktop version and displays the mobile version.
This technique was developed to solve a fundamental problem: Outlook does not support @media queries, so responsive designs that rely solely on media queries break in Outlook. The ghost table approach creates a fully responsive layout that degrades gracefully in Outlook, showing the desktop version as a static layout. It is considered one of the most robust responsive email patterns.
Best Practices
Use ghost tables sparingly for critical responsive breakpoints only. Each ghost table doubles the content in your HTML, increasing file size and complexity significantly.
Always test ghost table layouts with images blocked. The technique relies on table and cell structures that should hold up without images, but verify that hidden content does not leak into the visible layout.
Combine ghost tables with fluid hybrid techniques for the best cross-client responsive experience. Use percentage-based widths and max-width containers alongside ghost table conditional show-hide logic.
Avoid nesting ghost tables more than two levels deep. Deep nesting increases the risk of rendering inconsistencies and makes maintenance difficult.
Prefer ghost tables over display: none for hiding content from Outlook. Outlook's Word engine may ignore display: none in unpredictable ways, while conditional comments provide reliable hiding.
Related Glossary Terms
Email Apple Mail
Apple's email client for macOS and iOS, known for the best CSS support among major email clients due to its WebKit rendering engine.
Email Background Image
A background image applied to an email's table cell or container, requiring VML fallbacks for Outlook due to its lack of CSS background-image support.
Email Conditional
Proprietary conditional comments used to target Microsoft Outlook with specific HTML or VML code for cross-client email rendering.
Email Gmail CSS
The subset of CSS supported by Gmail, which strips most `<style>` block rules and requires inline CSS for reliable rendering across web and mobile.
Email Graceful Degradation
An email design strategy that starts with a feature-rich layout and systematically reduces complexity for clients with limited rendering capabilities.
Email Hybrid Coding
A responsive email development approach combining table-based layouts for Outlook with div-based fluid techniques for modern clients.
Frequently Asked Questions
The table is conditionally hidden or displayed based on viewport size, appearing or disappearing like a ghost. The term originated in the email development community around 2015.
Ghost tables work in all major email clients because they rely on basic table rendering and conditional comments. Outlook renders the desktop version via MSO conditionals. Mobile clients use media queries to toggle visibility. Desktop clients like Apple Mail honour media queries and display correctly.
Media queries apply CSS rules based on viewport width and work in most modern email clients except Outlook. Ghost tables provide an alternative for Outlook by wrapping content in `2026 Email Calculator. All rights reserved.