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

<p>эта фантастическая статья описывает, как создавать адаптивные таблицы, которые сказочно масштабируются для мобильных браузеров.</p><p>сейчас я пытаюсь применить ту же технику к html-письмам, но <code>display:block</code> просто не работает в html-письмах.</p><p><strong>для воспроизведения вопроса:</strong></p><ol> <li> <p>сохраните следующий код как html-страницу:</p> <pre><code><!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> </code></pre></li> <li> <p>откройте страницу в safari</p> </li> <li> <p>измените размер окна, чтобы заметить, как таблица изменяется с меньшим размером окна</p> </li> <li> <p>нажмите <kbd>cmd</kbd>+<kbd>i</kbd> или <code>file->mail</code> содержимое этой страницы для создания электронного письма в формате html</p> </li> <li> <p>измените размер окна электронной почты, чтобы заметить, как таблица по-прежнему правильно изменяет размер таблицы</p> </li> <li> <p>отправьте письмо себе и откройте его.</p> </li> <li> <p>теперь обратите внимание на то, как электронная почта действительно отвечает на медиа-запрос, но неудачно рестайлинг таблицы.</p> </li> </ol><p>я еще не нашел почтовый клиент, который действительно отображает таблицу правильно. это тупик или у вас есть идеи обходных путей?</p>

<p>принятый ответ дает некоторую полезную информацию, но не касается вопроса напрямую. недавно я экспериментировал с адаптивными электронными письмами и нашел несколько хороших решений, которые другие могут найти полезными. вот так...</p><p>чтобы ответить на вопрос, вы можете использовать <code>display:block;</code>, чтобы столбцы таблицы вели себя как строки на некоторых мобильных устройствах (android, ios и kindle). </p><p>вот пример, показывающий, как вы могли бы создать 2-колоночный макет стека (левые столбцы сверху правого столбца) на мобильных устройствах.</p><p><strong>html</strong></p><pre><code><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> </code></pre><p><strong>css</strong></p><pre><code>@media only screen and (max-width: 640px) { body[yahoo] .devicewidth {width:440px!important; } t body[yahoo] .full { display:block; width:100%; } } </code></pre><p><strong>примечание:</strong> селектор <code>body[yahoo]</code> <a href="http://www.emailonacid.com/blog/details/c13/stop\_yahoo\_mail\_from\_rendering\_your\_media\_queries">запрещает yahoo обрабатывать медиазапросы</a> . элемент <code>body</code> моего письма имеет атрибут <code>yahoo="fix"</code>. </p><p>приведенный выше css говорит, что если ширина экрана меньше 640 пикселей, то <code>td</code>s с классом <code>full</code> должны <code>display:block</code> с <code>width:100%</code>. </p><p>теперь, давайте немного поумнем. иногда вам нужно, чтобы столбец слева укладывался ниже столбца справа. для этого мы можем использовать <code>dir="rtl"</code> на содержащей <code>table</code>, чтобы изменить порядок столбцов. css остается прежним, вот новый html:</p><p><strong>html</strong></p><pre><code><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> </code></pre><p>добавляя <code>dir="rtl"</code>, мы говорим, что нужно изменить порядок столбцов. первый столбец (в потоке html) отображается справа, второй столбец (в html) слева. для экранов размером менее 640 пикселей отображается первый столбец (столбец справа) первым, а второй столбец (столбец слева) вторым.</p><p>вот <a href="http://jsfiddle.net/brettdewoody/xnj9q/">полный html и css</a> и скриншоты из gmail и ios 5 прилагаются.</p><p><img src="https://i.stack.imgur.com/boaiq.png" alt="gmail"> <img src="https://i.stack.imgur.com/zq9g1.png" alt="ios 5"> <img src="https://i.stack.imgur.com/izqmo.png" alt="android 4"></p>

<p>я смог заставить его работать, вот результат: <a href="https://litmus.com/pub/d9ac198">https://litmus.com/pub/d9ac198</a> </p><p>вот код, который я использую, чтобы заставить td вести себя как строки:</p><pre><code>table[class="magic"], table[class="magic"] tbody, table[class="magic"] tr, table[class="magic"] td { display: block !important; width: 100%; } </code></pre>

<p>я предлагаю вам обратиться к этому: <a href="http://www.campaignmonitor.com/css/">http://www.campaignmonitor.com/css/</a> </p><p>хотя это и не очень актуально, это отличный ресурс с точки зрения поддержки css для электронной почты. к сожалению, при создании шаблонов электронной почты вам нужно учитывать не только браузеры, но и разные клиенты, например outlook и поддержка css, которую они предлагают, общеизвестно плохие.</p><p>вдобавок к этому почтовые провайдеры, такие как gmail, как правило, отбрасывают определенные части вашего документа (например, заголовок), поэтому становится очень трудно применять любые адаптивные концепции дизайна к аудитории (почтовым клиентам), которая имеет очень слабую поддержку даже базовых css.</p>

<p>другой подход заключается в работе с двумя дизайнами в одном электронном письме: один для настольных ридеров и один для мобильных ридеров, как <a href="https://stackoverflow.com/questions/29389866/responsive-e-mail-turn-table-cells-td-to-cleared-blocks#answer-29392600">продемонстрировано здесь</a> .</p>

<p>у меня точно такая же проблема! я думал, что это будет работать только на mail на устройствах ios, но это происходит именно так, как вы говорите - это работает, пока вы на самом деле не отправите его.</p><p>@luca, мы знаем, что поддержка не очень хорошая, но большинство медиа-запросов игнорируются, так что это приятно добавить, если вы хотите, чтобы электронная почта выглядела немного лучше в современных почтовых клиентах. outlook и другие по-прежнему получали бы «обычное» html-письмо, без медиазапросов и адаптивных таблиц.</p>

<p>я обнаружил, что с помощью медиа-запросов для стека элементов td для мобильных устройств, как это</p><pre><code>td[class="stack-content"] {display:block !important} </code></pre><p>кажется, работает для большинства устройств, за исключением windows phone 7, который, очевидно, не поддерживает свойство display: block.</p>