В этой фантастической статье описывается создание гибких таблиц, которые сказочно сканируются в мобильных браузерах.
Теперь я пытаюсь применить ту же технику к html-сообщениям электронной почты, но display:block просто не будет работать в html-письмах.
Чтобы воспроизвести проблему:
-
Сохраните следующий код в виде 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> -
Откройте страницу в Safari
-
Измените размер окна, чтобы отметить, как меняется таблица с меньшим размером окна
-
Нажмите CMD + i или
File->MailСодержимое этой страницы, чтобы создать HTML-адрес электронной почты -
Измените размер окна электронной почты, чтобы узнать, как таблица по-прежнему правильно изменяется.
-
Отправьте электронное письмо себе и откройте его.
-
Теперь обратите внимание на то, как письмо действительно отвечает на мультимедийный запрос, но безуспешно рестайлинг таблицы.
Мне еще нужно найти почтовый клиент, который фактически отображает таблицу правильно. Это тупик или у вас есть идеи обходных решений?
