Способ скрыть таблицы в HTML e-mail в встроенном css-только чтобы показать их позже через медиа-запрос

поместите таблицу в тег div html и добавьте ее стиль как дисплей:нет !важно!--2--> в медиа-запросов.

после боя я смог придумать.

• вы не можете использовать высота. Gmail заменяет его на min-height.
• не точно соответствуют цвету bg и тексту
• изображения должны быть сделаны высотой и шириной 1px, а затем увеличены с медиа-запросами
• вы все еще можете получить некоторые элементы, отображаемые на экране в gmail-попробуйте сделать их как можно незаметнее

в CSS:

@media all and (max-width: 480px) {
  .mobile-hide {
     width:1px !important; 
     display:none !important; 
     color:#fff;
  }
  .mobile-show {
     display:block !important;
     line-height:125% !important;
     font-size:14px !important;
     height:auto !important; 
     color:#666 !important;
  }
  .mobile-image {
     width:350px !important;
     height:446px !important;
  }
  .w800 {width:400px !important;}
}

HTML:

<table class="w800" width="800">
...
<tr><td>
<a href="http://mylink"><img src="image.jpg" width="300" height="300" border="0" alt="My Sweet Image" /></a>
</td>

<!-- a big fat image on the right for big screens only -->
<td class="mobile-hide">
<img class="mobile-hide" src="image2.jpg" width="450" height="500" border="0" alt="" />
<span class="mobile-hide">
My Text with a <a href="http://mylink" class="mobile-hide">link</a></span>
</td></tr>
...
</table>

<!-- a new table at the bottom for small screens only, "one column" -->
<table width="400" style="width:400px; margin:0 auto;">
<tr><td class="mobile-show" style="line-height:0px;font-size:0px;height:0px;margin:0;padding:0;">
<img class="mobile-image" src="image2.jpg" width="1" height="1" border="0" alt="" />
<span class="mobile-show" style="font-size:1px; color:#ffe;">
My Text with a <a href="http://mylink" style="text-decoration:none; color:#ffe;" class="mobile-show">link</a></span>
</td></tr>
</table>

Я придумал немного более элегантное решение, которое, похоже, работает во всех популярных почтовых клиентах webmail & desktop, кроме Lotus Notes 6 & 7 (предсказуемо). Здесь мы идем:

<style> 
   @media only screen and (max-width: 480px) { 
      .invisible { max-height: none !important; font-size: 12px !important; display: block !important; }
   }

   ...

   .invisible { max-height: 0px; font-size: 0; display: none; }
</style>

вот мои результаты - как вы думаете, это тоже жизнеспособное решение?

вот что я использую для html-писем, чтобы скрыть и показать контент. Простой, легко понять классы "мобильный" и "рабочий стол". "Мобильный" - это дисплей только для мобильных устройств. "Рабочий стол" отображается только для рабочего стола.

*[class=mobile]{display:none;}

@media only screen and (max-width:600px) { 
    *[class=desktop]{display:none !important;}
    *[class=mobile]{display:block !important;width:auto !important;max-height:inherit !important;overflow:visible !important;float:none !important;}
    *[class="block"]{display:block !important;padding:5px;}
}

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

чтобы заставить Gmail вести себя, вам нужно обнулить все ваши элементы и развернуть их в CSS, который Gmail в любом случае будет полностью игнорировать. Все встроенное, что вы не хотите показывать Gmail, должно быть width: 0;max-height: 0;overflow: hidden;

вот когда CSS (пример выше вступает в игру. Объявление второго класса в запросе media расширяет блок до размер approprate для отображения на мобильных устройствах и Gmail скрывает его.

<!--[if !mso]><!-->
<td class="mobile" style="width: 0;max-height: 0;overflow: hidden;">
    <img alt="" border="0" src="http://www.placehold.it/150x150" style="display:block;" width="100%">
</td>
<!--<![endif]-->

последнее, но не менее важное, эта последняя часть еще не протестирована.. У меня возникли проблемы с Windows Mobile, чтобы скрыть то, что я хочу скрыть. Я думаю, что разработка моего условного комментария решит проблему, изменив его следующим образом:

<!--[if !mso]><!--><![if !IEMobile]>
<td class="mobile" style="width: 0;max-height: 0;overflow: hidden;">
    <img alt="" border="0" src="http://www.placehold.it/150x150" style="display:block;" width="100%">
<![endif]><!--<![endif]-->

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

вам нужно установить:

style="vertical-align:top;line-height:0px;font-size:0px;height:0px;margin:0;padding:0;mso-hide:all;"

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

litmus.com может служить отличным инструментом для этого.

display:none получает раздели gmail!

чтобы скрыть таблицы из gmail, отобразите его как блок С нулевой высотой: Установите встроенный стиль для каждой таблицы в: display:block; overflow:hidden; height: 0; max-height: 0;

помните чтобы применить встроенный стиль к любым дочерним таблицам скрытой таблицы. Класс переопределения phoneTableOnly нужно только перейти на родительский стол.

пример ниже покажет только таблицы на устройствах, которые поддерживают запросы мультимедиа с максимальной шириной 640px. Идеальный для мобильного меню, которое вы не хотите показывать на настольных компьютерах и gmail.

<style type="text/css">
    /*Note: This stylesheet is ignored by gmail.*/
    @media only screen and (max-width: 640px) {
        /*Restore tables:*/
        table[class="phoneTabletOnly"], table[class="phoneTabletOnly"] table {
            display: table !important;
            overflow: visible !important;
            height: auto !important;
            max-height: none !important;
        }
    }
</style>

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="phoneTabletOnly" style="display:block; overflow:hidden; height: 0; max-height: 0;">
<tbody>
  <tr>
     <td>
        <table cellpadding="0" cellspacing="0" border="0" style="display:block; overflow:hidden; height: 0; max-height: 0;">
           <tbody>
              <tr>
                 <td>
                    This will be hidden in gmail.
                 </td>
              </tr>
           </tbody>
        </table>
        <table cellpadding="0" cellspacing="0" border="0" style="display:block; overflow:hidden; height: 0; max-height: 0;">
           <tbody>
              <tr>
                 <td>
                    This will also be hidden in gmail.
                 </td>
              </tr>
           </tbody>
        </table>
     </td>
  </tr>
</tbody>
</table>

PS. Испытания в лакмус.