Складная таблица в электронной почте HTML (Outlook 2007-2010) - PullRequest
5 голосов
/ 26 октября 2011

В прошлом я отправлял различные электронные письма в формате HTML и видел довольно большие ограничения, связанные с этим.Что мне действительно нужно, так это возможность иметь регионы со способностью показывать / скрывать - щелкните значок «плюс» или заголовок, чтобы переключиться.

Я полагаю, что JS отсутствует, возможно, CSS может быть.Мне это нужно только для работы в Outlook 2007-2010.Есть предложения?

Спасибо!

Ответы [ 2 ]

6 голосов
/ 26 октября 2011

Вы можете сделать это в Outlook, используя теги привязки. Хитрость заключается в том, чтобы создать 2 таблицы, которые разделены ячейкой td большой указанной высоты, чтобы вы не увидели вторую таблицу.

Обе таблицы являются точными дубликатами, за исключением того, что в таблице 1 есть ссылка show, а в таблице 2 - контент, который вы хотите показать, и ссылка скрытия.

Когда вы щелкаете метку привязки, электронное письмо перемещается вниз в положение, указанное во второй таблице. Поскольку содержимое обеих таблиц одинаковое, за исключением видимости отображения / скрытия поля, вы создали иллюзию, что поле переключается.

Если у вас есть более одного окна «показать / скрыть», вам нужно будет создать больше таблиц. Письмо будет очень длинным, но эффект переключения все еще работает в Outlook.

Теги привязки:

<a href="#section1">Click here to show content</a>
<a name="section1"></a>

Вот краткий пример: http://jsfiddle.net/mjcookson/nq3Re/

Обновление до комментария. Кроме того, ваша электронная почта может не заполнять весь видовой экран, поэтому между таблицами используется пробел, чтобы не видеть вторую таблицу сразу после первой таблицы.

2 голосов
/ 26 октября 2011

Вы не можете сделать это в Outlook.Его механизм рендеринга электронной почты HTML довольно плох.Я видел, что это сделано для мобильных веб-браузеров и Android-браузеров.

См. Эту статью: http://coding.smashingmagazine.com/2011/08/18/from-monitor-to-mobile-optimizing-email-newsletters-with-css/

...