Definition
Fluid tables use percentage widths so email layouts reflow to fit any screen. Because clients have poor flexbox support, percentages inside tables do the responsive work.
Fluid layout is the counterpart to fixed-width layout.
Fluid tables make email responsive where flexbox and grid fail, using percentage widths inside tables. Media queries handle the complex collapses on mobile. Testing in Outlook, which handles percentages differently, is essential.
How Fluid Layout Works
Percentage widths scale columns to the viewport.
Media queries help collapse complex layouts on mobile.
Why It Matters
Fluid tables make email responsive where flexbox fails. Understanding them is core to building layouts that work everywhere.
Best Practices
- Use percentage widths on inner columns.
- Pair percentages with media queries for graceful collapse on mobile.
- Test fluid layouts in Outlook, which behaves differently with percentages.
- Set a max-width for desktop.
- Test across devices.
Was this useful?
Related Glossary Terms
Above the Fold in Email
Above the fold in email refers to the content visible to a recipient before they scroll, a critical area for first impressions and primary calls to action.
Accessible CTA (Email)
An accessible CTA is a button or link coded with sufficient colour contrast, visible focus states, descriptive screen-reader text, and a minimum touch target of 44×44 pixels.
Adaptive Design
Adaptive design in email uses predefined layouts that adjust to specific device or client widths, rather than fluidly resizing to every possible screen.
AI-Generated Content in Email
AI-generated content in email is copy, images, code or subject lines produced by artificial intelligence tools to speed up campaign production and testing.
Alt Text
Alt text is the written alternative to an image in an email, displayed when images are blocked, slow to load, or consumed by screen readers.
Autoplay Video in Email
Autoplay video in email refers to the limited ability to play video content automatically when an email is opened, using specific client-supported techniques.
Frequently Asked Questions
A layout that scales to the width of any viewport using proportional sizing. Fluid tables make email responsive where flexbox and grid fail, using percentage widths inside tables.
Mostly, but complex multi-column layouts still benefit from media queries. Media queries handle the complex collapses on mobile.
Outlook desktop and some webmails miscalculate percentage widths. Testing in Outlook, which handles percentages differently, is essential.
Clients have poor flexbox support, so tables handle scaling. Fluid tables make email responsive where flexbox and grid fail, using percentage widths inside tables.
It depends on your audience and design goals. Media queries handle the complex collapses on mobile.