it-swarm.com.ru

Можно ли использовать display: block on td в электронной почте HTML, чтобы добиться адаптивного дизайна таблицы?

Эта фантастическая статья описывает, как создавать адаптивные таблицы, которые сказочно масштабируются для мобильных браузеров.

Сейчас я пытаюсь применить ту же технику к html-письмам, но display:block просто не работает в html-письмах.

для воспроизведения вопроса:

  1. Сохраните следующий код как HTML-страницу:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            @media only screen and (max-width: 760px), screen and (max-device-width: 480px)  {
                /* Force table to not be like tables anymore */
                table, td, tbody, tr{
                        display: block;
                        width:100%;
                        padding:0;
                        clear:both;
                }
                td {
                        /* Behave  like a "row" */
                        position: relative !important;
                }
            }
        </style>
    </head>
    <body>
        <table style="width:100%;">
            <tr>
                <td style="border:1px solid red;">1/1</td>
                <td style="border:1px solid red;">1/2</td>
                <td style="border:1px solid red;">1/3</td>
            </tr>
            <tr>
                <td style="border:1px solid red;">2/1</td>
                <td style="border:1px solid red;">2/2</td>
                <td style="border:1px solid red;">2/3</td>
            </tr>
        </table>
    </body>
    </html>
    
  2. Откройте страницу в Safari

  3. Измените размер окна, чтобы заметить, как таблица изменяется с меньшим размером окна

  4. Нажмите CMD+i или File->Mail Содержимое этой страницы для создания электронного письма в формате HTML

  5. Измените размер окна электронной почты, чтобы заметить, как таблица по-прежнему правильно изменяет размер таблицы

  6. Отправьте письмо себе и откройте его.

  7. Теперь обратите внимание на то, как электронная почта действительно отвечает на медиа-запрос, но неудачно рестайлинг таблицы.

Я еще не нашел почтовый клиент, который действительно отображает таблицу правильно. Это тупик или у вас есть идеи обходных путей?

11
chris

Принятый ответ дает некоторую полезную информацию, но не касается вопроса напрямую. Недавно я экспериментировал с адаптивными электронными письмами и нашел несколько хороших решений, которые другие могут найти полезными. Вот так...

Чтобы ответить на вопрос, вы можете использовать display:block;, чтобы столбцы таблицы вели себя как строки на некоторых мобильных устройствах (Android, iOS и Kindle). 

Вот пример, показывающий, как вы могли бы создать 2-колоночный макет стека (левые столбцы сверху правого столбца) на мобильных устройствах.

HTML

<table class="deviceWidth" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
  <tr>
    <td width="50%" align="right" class="full">
      <p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
        <a href="#"><img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>  
      </p>                  
    </td>
    <td width="50%" align="left" class="full">
        <a href="#"><img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>                     
    </td>
  </tr>
</table>

CSS

@media only screen and (max-width: 640px)  {
    body[yahoo] .deviceWidth {width:440px!important; }  T 

    body[yahoo] .full {
        display:block;
        width:100%;
    }
}

Примечание: Селектор body[yahoo]запрещает Yahoo обрабатывать медиазапросы . Элемент body моего письма имеет атрибут yahoo="fix"

Приведенный выше CSS говорит, что если ширина экрана меньше 640 пикселей, то tds с классом full должны display:block с width:100%

Теперь, давайте немного поумнем. Иногда вам нужно, чтобы столбец слева укладывался НИЖЕ столбца справа. Для этого мы можем использовать dir="rtl" на содержащей table, чтобы изменить порядок столбцов. CSS остается прежним, вот новый HTML:

HTML

<table class="deviceWidth" dir="rtl"  width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
  <tr>
    <td width="50%" dir="ltr" align="right" class="full">
      <p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
        <a href="#"><img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a> 
      </p>                  
    </td>
    <td width="50%" dir="ltr" align="left" class="full">
        <a href="#"><img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>                      
    </td>
  </tr>
</table>

Добавляя dir="rtl", мы говорим, что нужно изменить порядок столбцов. Первый столбец (в потоке HTML) отображается справа, второй столбец (в HTML) слева. Для экранов размером менее 640 пикселей отображается первый столбец (столбец справа) первым, а второй столбец (столбец слева) вторым.

Вот полный HTML и CSS и скриншоты из Gmail и iOS 5 прилагаются.

GmailiOS 5Android 4

14
Brett DeWoody

Я смог заставить его работать, вот результат: https://litmus.com/pub/d9ac198

Вот код, который я использую, чтобы заставить td вести себя как строки:

table[class="magic"],
table[class="magic"] tbody,
table[class="magic"] tr,
table[class="magic"] td {
    display: block !important;
    width: 100%;
}
2
Maxim

Я предлагаю вам обратиться к этому: http://www.campaignmonitor.com/css/

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

Вдобавок к этому почтовые провайдеры, такие как gmail, как правило, отбрасывают определенные части вашего документа (например, заголовок), поэтому становится очень трудно применять любые адаптивные концепции дизайна к аудитории (почтовым клиентам), которая имеет очень слабую поддержку даже базовых CSS.

2
Luca

Другой подход заключается в работе с двумя дизайнами в одном электронном письме: один для настольных ридеров и один для мобильных ридеров, как продемонстрировано здесь .

1
cptstarling

У меня точно такая же проблема! Я думал, что это будет работать только на Mail на устройствах iOS, но это происходит именно так, как вы говорите - это работает, пока вы на самом деле не отправите его.

@Luca, мы знаем, что поддержка не очень хорошая, но большинство медиа-запросов игнорируются, так что это приятно добавить, если вы хотите, чтобы электронная почта выглядела немного лучше в современных почтовых клиентах. Outlook и другие по-прежнему получали бы «обычное» HTML-письмо, без медиазапросов и адаптивных таблиц.

0
Dinis Correia

Я обнаружил, что с помощью медиа-запросов для стека элементов td для мобильных устройств, как это

td[class="stack-content"] {display:block !important}

кажется, работает для большинства устройств, за исключением Windows Phone 7, который, очевидно, не поддерживает свойство display: block.

0
heyhugo