Вопросы Теги

Можно ли использовать блок отображения :в 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. Теперь обратите внимание, как электронное письмо действительно отвечает на медиа-запрос, но безуспешно изменяет стиль таблицы.

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

12
задан Brian Tompsett - 汤莱恩 26 June 2017 в 18:29
поделиться