Есть ли эквивалент максимальной ширины CSS, который работает в электронных письмах HTML?

Question

Я пытаюсь создать сообщение электронной почты в формате HTML, которое будет правильно отображаться во всех широко используемых почтовых клиентах. Я упаковываю всю электронную почту в таблицу, и мне бы хотелось, чтобы ее ширина составляла до 98% доступной ширины, но не превышала 800 пикселей. Как это: <table style="width:98%; max-width:800px;">

Но я так не делаю, поскольку в соответствии с этим Outlook 2007 не поддерживает свойство ширины CSS.

Вместо этого я делаю это: <table width="98%">

Есть ли способ также установить максимальную ширину, не полагаясь на CSS?

Answer 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/

Answer 2

Есть один прием, который вы можете сделать для Outlook 2007, используя условные html-комментарии.
Приведенный ниже код гарантирует, что таблица Outlook имеет ширину 800px, а не максимальную ширину, но она работает лучше, чем пропуск таблицы во всем окне.

<!--[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>

Answer 3

Краткий ответ: нет.

Длинный ответ:

Фиксированные форматы лучше работают для электронных писем в формате HTML. По моему опыту, лучше всего притворяться, что это 1999 год, когда дело доходит до электронных писем в формате HTML. Будьте явными и используйте HTML-атрибуты (width = "650") везде, где это возможно, в определениях таблиц, а не CSS (style = "width: 650px"). Используйте фиксированную ширину, без процентов. Безопасной ставкой является ширина таблицы в 650 пикселей. Используйте встроенный CSS для установки свойств текста.

Дело не в том, что работает в «электронных письмах HTML», а в том, что почтовые клиенты и их ограниченная (а иногда и намеренно, в случае Gmail, Hotmail и т. Д.) Способность отображать HTML.

Answer 4

Немного опоздал на вечеринку, но на этом все закончится. Я оставил пример на 600, поскольку это то, что большинство людей будет использовать:

Аналогичен примеру Шэя, за исключением того, что также включает 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]-->

Вот еще один пример использования: Отзывчивые электронные письма с подтверждением заказа для мобильных устройств?

Answer 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">&nbsp;</td></tr>
     <tr>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
        <td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->

             <!-- PLACE CONTENT HERE -->

        </td>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
    </tr>
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>