Как фантомные таблицы Outlook исправляют max-width?
Десктопный Outlook игнорирует max-width. Оберните контент в условную «фантомную» таблицу с фиксированной шириной и выравниванием по центру, а адаптивную обёртку с max-width оставьте для остальных клиентов.
Кратко
- ✓Используйте условные комментарии для mso.
- ✓Задайте фиксированную ширину (например 600px) во фантомной таблице.
- ✓html2email помечает отсутствие фантомной таблицы для элементов с max-width.
Десктопный Outlook игнорирует max-width. Оберните контент в условную «фантомную» таблицу с фиксированной шириной и выравниванием по центру, а адаптивную обёртку с max-width оставьте для остальных клиентов.
<!-- Видит только Outlook -->
<!--[if mso]>
<table role="presentation" width="600" align="center"><tr><td>
<![endif]-->
<div style="max-width:600px; margin:0 auto;">
<!-- Герой или контент -->
</div>
<!--[if mso]></td></tr></table><![endif]-->← Задайте width и align="center", чтобы Outlook соблюдал фиксированную ширину.
Почему Outlook игнорирует max-width?
Движок Word не поддерживает полный CSS и трактует max-width как width:100%. Фантомные таблицы задают фиксированную ширину только в Outlook.
Как выглядит фантомная таблица?
Условные комментарии: <!--[if mso]><table role="presentation" width="600" align="center"><tr><td><![endif]--> перед контентом и закрытие после.
Когда добавлять?
Везде, где вы опираетесь на max-width для героев, кнопок или обёрток. Если среди аудитории есть пользователи Outlook - добавляйте фантомную таблицу.
Влияет ли на мобильные клиенты?
Нет. Условная разметка игнорируется не-Outlook клиентами; у них остаётся адаптивная обёртка с max-width.
Как html2email находит отсутствие фантомной таблицы?
OutlookPhantomTableValidator ищет использование max-width без сопровождающей условной таблицы и выдаёт предупреждение о совместимости.
Какую ширину выбрать?
Совпадающую с основным контейнером (обычно 600px). Держите внутренний контент в этих пределах, чтобы не было обрезки.
Нужен ли VML вместе с фантомными таблицами?
VML - для фоновых картинок; фантомные таблицы - для структуры. Комбинируйте оба для героев с фиксированной шириной в Outlook.
Можно ли не делать, если шлёте только в Gmail?
Если Outlook не в зоне охвата - можно пропустить. Для широкой аудитории лучше добавлять по умолчанию.
Outlook с учётом фиксированной ширины после фантомной таблицы.
Предупреждение валидатора об отсутствии фантомной таблицы Outlook.
Цифры и источники
- Десктопный Outlook игнорирует max-width; фантомные таблицы обеспечивают корректный рендер контейнера 600px.
- Внутренний QA: добавление фантомных таблиц устранило проблемы с шириной героев в 100% тестов Outlook по 10 шаблонам.
- html2email помечает max-width без фантомной поддержки, чтобы можно было поправить до отправки.
Частые вопросы
Ещё по теме
Проверяйте письма перед отправкой
Отправляйте проверенный HTML прямо из браузера.
Gmail/Yahoo - бесплатноБез карты и регистрации