Существует ли эквивалент CSS max-width, который работает в электронных письмах HTML?
Я пытаюсь создать HTML-письмо, которое будет отображаться правильно во всех широко используемых почтовых клиентах. Я обертываю всю электронную почту в таблице, и мне бы хотелось, чтобы она имела ширину до 98% доступной ширины, но не более 800 пикселей. Как это:
<table style="width:98%; max-width:800px;">
Но я не делаю этого, потому что в соответствии с этим Outlook 2007 не поддерживает свойство ширины CSS.
Вместо этого я делаю это:
<table width="98%">
Можно ли установить максимальную ширину без использования CSS?
Ответы
Ответ 1
Да, есть способ эмулировать max-width с помощью таблицы, что дает вам как отзывчивую, так и удобную для Outlook компоновку. Что еще, это решение не требует условных комментариев.
Предположим, что вы хотите получить эквивалент центрированного div с max-width от 350px. Вы создаете таблицу, задаете ширину 100%. В таблице три ячейки подряд. Установите ширину центра TD на 350 (используя атрибут HTML width, а не CSS), и там вы идете.
Если вы хотите, чтобы ваш контент выравнивался слева, а не центрирован, просто оставьте первую пустую ячейку.
Пример:
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="350">The width of this cell should be a maximum of
350 pixels, but shrink to widths less than 350 pixels.
</td>
<td></td>
</tr>
</table>
В jsfiddle я даю таблице границу, чтобы вы могли видеть, что происходит, но, очевидно, вы не захотите этого в реальной жизни:
http://jsfiddle.net/YcwM7/
Ответ 2
Есть трюк, который вы можете сделать для Outlook 2007 с помощью условных комментариев html.
В приведенном ниже коде убедитесь, что таблица Outlook имеет ширину 800 пикселей, а не максимальную ширину, но она работает лучше, чем позволить таблице охватывать все окно.
<!--[if gte mso 9]>
<style>
#tableForOutlook {
width:800px;
}
</style>
<![endif]-->
<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
<table id="tableForOutlook"><tr><td>
<![endif]-->
<tr><td>
[Your Content Goes Here]
</td></tr>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
<table>
Ответ 3
Короткий ответ: нет.
Длинный ответ:
Фиксированные форматы работают лучше для электронных писем HTML. По моему опыту, вам лучше всего притворяться, что это 1999 год, когда дело касается электронных писем HTML. Будьте ясны и используйте атрибуты HTML (width = "650" ), где это возможно в определениях таблиц, а не CSS (style = "width: 650px" ). Используйте фиксированную ширину, без процентов. Безопасная ставка - ширина стола шириной 650 пикселей. Используйте встроенный CSS для установки свойств текста.
Это не вопрос того, что работает в "HTML-письмах", а скорее множество почтовых клиентов и их ограниченная (а иногда и преднамеренно так в случае Gmail, Hotmail и т.д.) возможность рендеринга HTML.
Ответ 4
Бит опоздал на вечеринку, но это будет сделано. Я оставил этот пример в 600, поскольку это то, что большинство людей будет использовать:
Подобно примеру Shay, за исключением того, что этот также включает max-width для работы с остальными клиентами, которые имеют поддержку, а также второй метод предотвращения расширения (медиа-запрос), который необходимо для Outlook'11.
В голове:
<style type="text/css">
@media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
</style>
В теле:
<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
main content here
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
Вот еще один пример этого: Ответные письма с подтверждением заказа для мобильных устройств?
Ответ 5
Это решение, которое сработало для меня
https://gist.github.com/elidickinson/5525752#gistcomment-1649300, благодаря @philipp-klinz
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->
<!-- PLACE CONTENT HERE -->
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
</table>
