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

116

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

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

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

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

Тим Гудман
источник
1
Я обновил принятый ответ на ответ от @MarkNugent, поскольку, похоже, он вызвал консенсус - даже если он пришел на 4 года слишком поздно, чтобы быть полезным для меня. :)
Тим Гудман

Ответы:

227

Да, есть способ имитировать max-widthиспользование таблицы, что дает вам как адаптивный, так и удобный для Outlook макет. Более того, это решение не требует условных комментариев.

Предположим , вы хотите эквивалент центрированное divс max-widthиз 350px. Вы создаете таблицу, устанавливаете ширину 100%. В таблице три ячейки подряд. Установите ширину центра TDна 350(используя widthатрибут HTML , а не 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/

Марк Ньюджент
источник
18
Это лучший ответ прямо здесь всем ^^^. Игнорируйте принятый ответ и условный ответ.
Ник Мэннинг
4
Чтобы сэкономить время кому-то еще, необходим хотя бы один из этих пустых элементов <td>, иначе <td> с содержимым растянется, чтобы заполнить весь <tr>. Но это однозначно лучшее решение из предложенных.
Крис Стрикленд
2
@Phyllis Sutherland: Вы можете попытаться удалить встроенный размер img и заменить его на:style="max-width: 100%; height: auto; width: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;"
morespace54
5
будьте осторожны, не добавляйте единицы к внутренней ширине, как это сделал я, иначе это не сработает! т.е. не делайте width = "350px"
Магритт 06
3
@PhyllisSutherland нашел исправление для изображений: <img src="file.jpg" "width="350" alt="" style="display:block;width:100%" /> litmus.com/community/discussions/…
cbron
35

В 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>
Шай Эрлихмен
источник
6
отличное предложение, но поскольку это селектор идентификатора, а не класс, вы бы сэкономили на вводе текста, используя
атрибут
Это круто. За исключением одной проблемы, установив ширину, Outlook не позволит уменьшить размер электронного письма меньше заданного размера. Если не устанавливать ширину, электронное письмо будет расширяться на весь экран. Выбери свой яд :)
Координатор
13

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

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

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

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

Диодей - Джеймс Макфарлейн
источник
Да, это то, чего я ожидал, но решил, что спрошу.
Тим Гудман
35
Установив фиксированную ширину 650, ваши письма будут выглядеть ужасно в мобильных почтовых клиентах.
DrewB 08
6
-1: Это выглядит ужасно, потому что мобильные устройства в реальном мире имеют относительно небольшие размеры. Это означает, что без масштабирования и панорамирования текст в ваших проектах будет нечитаемо маленьким. Взгляните на руководство Campaign Monitor « Адаптивный дизайн электронной почты» .
Карл Хорки
1
-1 также потому, что я только что имел дело с этим в мобильных клиентах, и фиксированная ширина была именно моей проблемой.
Брайан Фитцджеральд
7
2015 год. Мобильные устройства есть везде. Вы говорите забыть о мобильных устройствах для глупого взгляда? Я говорю: забудьте о мировоззрении. И все остальные дерьмовые продукты от Microsoft.
refaelio
5

Немного поздно на вечеринку, но это будет сделано. Я оставил пример на 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]-->

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

Джон
источник
0

Это решение, которое сработало для меня

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>
генри
источник
Не могли бы вы привести более сжатый пример, там много всего, что не требуется для решения вопроса
ЭдЛ
@EdL идея состоит в том, что это самый краткий способ сделать электронную почту удобной max-width. Все это заменит <div style="max-width: ...px">...</div>. Для электронного письма, над которым я работал, когда я нашел эту суть, это было единственное решение, которое
Генри,
@henry Я больше имел в виду все атрибуты font-size для cellpadding и т. д. Изображения являются сложными, потому что, если вы не укажете width = "500" в качестве атрибута, где 500 - это ширина в пикселях, Outlook сделает изображения до полного размера ( относительно файла изображения) это обычно приводит к фиксированной ширине.
EdL
Оставив это как есть, потому что это не мой код - я просто цитирую его по сути - но я сделал его вики сообщества. Я считаю , что это необходимо явно указать 0px paddingс и marginS, а также 0 cellpaddingи cellspacing. Возможно, указание line-heightбудет работать как замена для font-sizeзаполнения в случаях, когда heightэто не соблюдается (я бы хотел протестировать его на всех, trа затем на всех, tdчтобы точно увидеть, где это необходимо). @EdL, если вы можете получить более легкое решение, работающее так же хорошо, как это, было бы здорово -
Генри