Hide & Show TD in Gmail, Outlook & Yahoo

JW

8

James White replied 2014-12-01 09:44:21

mso-hide:all on its own won't work. It is a vendor specific property of the Microsoft Word engine. In order for the hide on desktop/show on mobile situation to work you need additional properties. Here are some additional properties you need to use:

*[class="hide"] {
    max-height:0; /* Gmail*/
    display:none; /* Generic*/
    mso-hide:all; /* Outlook clients*/
    overflow:hidden; /* Generic */
    font-size:0; /* Be careful with this one, only use if absolutely required */
}

Then in a media query you'd want to override any of the values set to the opposite of hiding.

Also note with mso-hide:all, that if you are trying to hide content within the table cell that includes nested tables, you must apply this property to any and all nested tables within as well.

Reply to James White

TN

1

Tsena Namsrai replied 2015-07-23 14:36:01

hi James, your comment helped me i spent almost 2 days wondering why sections in template were visible in MS Outlook . Thank you.

VD

3

Vic Dinovici replied 2014-12-16 14:23:35

the problem with hidden content is that it will show no matter what in the 2 cases bellow, even when using the code you guys shared here.
1. email forwarding
2. Outlook Web App

Reply to Vic Dinovici

LC

1

Lemuel Carinote replied 2014-12-12 19:10:20

I use this code to hide content in desktop:

<table class="mobshow" align="center" border="0" cellpadding="0" cellspacing="0" style="display: none; width:0; height:0; overflow:hidden; float:none; visibility:hidden; border:none">

and for the content in td p IMG etc:

 style="display: none; width:0; height:0; overflow:hidden; float:none; visibility:hidden; border:none;font-size:0; max-height:0; mso-hide: all"

to show content on mobile; the opposite css in a class so;

*[class].mobshow {
display: inline-block !important; width:auto !important; height:auto !important; overflow:visible !important; float:none !important; visibility:visible !important; border:none !important}

and note: if you would like to hide images on desktop -- make sure you remove the height and width on images so it will not create extra spaces.

Reply to Lemuel Carinote

JW

0

Justin Wright replied 2015-04-08 15:33:42

Hi Lemuel, I used your code in an email to hide a bottom navigation in desktop view. Which worked great. However, i'm unable to get the navigation to expand width 100% on mobile (which appears at the bottom of the email). Do you know of a solution?

Note: i'm testing only 1 navigation button here.

Here is the code I'm working with currently:


<style type="text/css">
body {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    background-color: #E5E5E5;
}
 @media screen and (max-width: 564px) {
table[class="navBot"] {
    display:block !important;
    width:100% !important;
    height:auto !important;
    overflow:visible !important;
    float:none !important;
    visibility:visible !important;
    border:none !important
}
td[class="navBot"] {
    display:block !important;
    max-height:none !important;
    width:100% !important;
    height:auto !important;
    overflow:visible !important;
    float:none !important;
    visibility:visible !important;
    border:none !important;
}
td[class="navBotTD1"] {
    display:block !important;
    max-height:none !important;
    width:100% !important;
    height:auto !important;
    overflow:visible !important;
    float:none !important;
    visibility:visible !important;
    border:none !important;
    padding-top:0px !important;
    padding-bottom:20px !important;
    padding-left:20px !important;
    padding-right:20px !important;
}
td[class="navBotTD2"] {
    display:block !important;
    max-height:none !important;
    width:100% !important;
    height:auto !important;
    overflow:visible !important;
    float:none !important;
    visibility:visible !important;
    border:none !important;
}
a[class="navBot"] {
    font-size:16px !important;
    padding-top:16px !important;
    padding-bottom:16px !important;
    display:block !important;
    max-height:none !important;
    width:100% !important;
    height:auto !important;
    overflow:visible !important;
    float:none !important;
    visibility:visible !important;
    border:none !important
}
}
</style>
</head>
<body style="padding:0; margin:0; -webkit-text-size-adjust:none;-ms-text-size-adjust:100%; background-color:#E5E5E5;" bgcolor="#E5E5E5">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="display:none; width:0; height:0; overflow:hidden; float:none; visibility:hidden; border:none" class="navBot">
    <tr>
      <td width="100%" style="display:none; width:0; height:0; overflow:hidden; float:none; visibility:hidden; border:none; font-size:0; max-height:0; mso-hide: all" bgcolor="#E5E5E5" class="navBot">

      <table border="0" cellspacing="0" cellpadding="0" width="100%" align="center" style="display:none; width:0; height:0; overflow:hidden; float:none; visibility:hidden; border:none" class="navBot">
                      <tr>
                        <td width="100%" align="center" style="padding-bottom:0px; padding-top:0px; padding-left:0px; padding-right:0px; display:none; width:0; height:0; overflow:hidden; float:none; visibility:hidden; border:none; font-size:0; max-height:0; mso-hide: all" class="navBotTD1">


                        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="display:none; width:0; height:0; overflow:hidden; float:none; visibility:hidden; border:none" class="navBot">
                            <tr>
                              <td align="center" bgcolor="#00274c" width="100%" style="display:none; width:0; height:0; overflow:hidden; float:none; visibility:hidden; border:none; font-size:0; max-height:0; mso-hide: all" class="navBotTD2"><a href="#" target="_blank" style="font-size:0; font-family: Proxima Nova, 'proxima_nova_rgregular',Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; display:none; width:0; height:0; overflow:hidden; float:none; visibility:hidden; border:none; max-height:0; mso-hide: all" class="navBot"><!--[if gte mso 9]>&nbsp;<![endif]-->Switchgear<!--[if gte mso 9]>&nbsp;<![endif]--></a></td>
                            </tr>
                          </table>


                          </td>
                      </tr>
                    </table>

        </td>
    </tr>
  </table>

Here is the email test on litmus: https://litmus.com/pub/e707872

Thanks for the help

LC

0

Lemuel Carinote replied 2015-04-13 18:19:53

If % in width does not work - try pixels.

or try this;

in css:

*[class].add_text:after{content:"NAV TITLE";}
*[class].add_text_one:after{content:"NAV#1";}
*[class].add_text_two:after{content:"NAV#2";}
*[class].add_text_three:after{content:"NAV#3";}

in the body;

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td align="center" valign="middle" class="mobnavtitle"><span class="add_text"></span></td>
</tr>
<tr>
<td align="center" valign="middle" class="mobnav"><a href="#" style="text-decoration:none; color:#327FBD; display:block"><span class="add_text_one"></span></a></td>
</tr>
<tr>
<td align="center" valign="middle" class="mobnav"><a href="#" style="text-decoration:none; color:#327FBD; display:block"><span class="add_text_two"></span></a></td>
</tr>
<tr>
<td align="center" valign="middle" class="mobnav"><a href="#" style="text-decoration:none; color:#327FBD; display:block"><span class="add_text_three"></span></a></td>
</tr>
</tbody>
</table>

LC

0

Lemuel Carinote replied 2014-12-16 15:34:23

if you forward the email you received to another user --- yes the hidden content render but you can have users use /click the "forward to a friend" feature by your esp. To-date I don't see other solution to permanently hide content. As we all know when an email forwarded, the email client remove some extra added code in inline or embedded styles.

Reply to Lemuel Carinote

MH

0

Mike Hill replied 2016-06-13 17:22:17

Hello!

I am using the hybrid/fluid method where I am hiding a right border on mobile.

Of course my class="noborder" works on all the mobile clients except the GMAIL APP.

So here is my <td> tag:

 <td style="padding: 10px 10px; border-right:2px solid #cccccc;" class="noborder">

And here's what my class looks like:

 .noborder {
  border-style: none !important;
           }

Is there a way I could inline this noborder class so the Gmail app will hide the border?

I've tried ALL the css inline tools and it's not doing the trick.

Any help would be incredible!!!

Thanks

Reply to Mike Hill

CP

0

Camille Palu replied 2015-11-05 06:29:28

Hi Thomas,

Here's a clean code snippet for a Mobile Show:
http://tabletrtd.com/codelibrary/2015/10/11/mobile-show

The key is to wrap the show code around a full table. A TR will never fully hide.

Reply to Camille Palu

GS

0

Glenn Smith replied 2015-04-08 20:28:40

To hide or show a <table> or <td> simply apply the following classes below to your <table> or <td>

class="mobileOn"

class="mobileOff"

And add the following CSS between your <style></style> tag in your <head>


@media only screen and (max-width: 480px) {
    *[class="mobileOff"] { width: 0px !important; display: none !important; }
    *[class*="mobileOn"] { display: block !important; max-height: none !important; }
}

Reply to Glenn Smith

NR

0

Niven Ranchhod replied 2014-11-30 19:25:50

What styles are you using to hide your cell?

Reply to Niven Ranchhod

EC

0

Email Campaigns replied 2014-12-01 12:46:59

I had to do something similar recently and found a solution online. Can't remember where I found this but it worked a treat for most clients when testing in Litmus. It didn't work that well in old Lotus.

I had the following setup:

Media Queries -----

*[class].mobile-hide { display:none !important; visibility: hidden !important;}
*[class].show {width:300px!important; height:auto!important;display:table!important;}
*[class].me {display:block!important; width:100%!important; max-height:inherit!important; overflow:visible!important;}
*[class].themoney {display: block!important; width:100% !important;height:auto !important;text-align:center!important; float:none!important;}

HTML ------

<!--[if !mso]><!-->
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container show" style="display: none; border-spacing: 0; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">

    <tr style="width:0; overflow:hidden; float:left; display:none; max-height:0px; mso-hide:all;" class="me">
        <td style="border-collapse: collapse !important;" class="themoney">

            <!-- YOUR CONTENT HERE -->

        </td>
    </tr>

</table>
<!--<![endif]-->

Reply to Email Campaigns

MS

0

Maureen Santosusso replied 2018-03-05 21:48:34

I have been trying the show / hide and can not get it to work with color blocks. It keeps showing a white gap. Any suggestions.????

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SUNOVION Utibron Clinical Impressions</title>

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

body {
background-color: #ffffff;
margin: 0px auto !important;
padding: 0px;
width: 100%; }

html {
width: 100%; }

.contentbg { background-color: #ffffff; }

img {
border:0px;
outline:none;
text-decoration:none;
display:block; }

.image_1 {
width: 100%; }

table.customers {
border-collapse: collapse;
border-spacing: 0;
width: 100%; }

span.preheader3{display: none; font-size: 1px;}

a{text-decoration:none;} /* to remove underlines in Windows Mail */

/* Clickable phone numbers - BE SURE TO CHANGE COLOR TO SAME FONT COLOR IN FILE /
a[href^="tel"], a[href^="sms"] {text-decoration:none; color:#000000; pointer-events:none; cursor:default;}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {text-decoration:default; color:#000000 !important; pointer-events:auto; cursor:default;}
/ End of Clickable phone numbers */

*[class~=hide_on_desktop] { display: none !important;}

@media only screen and (max-width:640px)

{
body{width:auto!important;}
table[class=main]{width:446px !important;}
table[class=logo]{width:100% !important;}
table[class=righttop-details]{width:100% !important;}
table[class=social-top]{width:100% !important;}
td[class=viewonline-field]{padding: 10px 0px 0px 0px !important;}
td[id=viewonline]{text-align:center !important;}
td[class=productspace]{display:none !important;}
td[class=productbox]{width:100% !important; display:block;}
td[class=product-hidebox]{height:40px !important; display:block !important;}
td[class=subcontentbox]{width:100% !important; display:block;}
td[class=subcontent-space]{height:20px !important;}
td[class=bottomicon]{width:127px !important;}
table[class=bottomiconbox]{width:100% !important;}
td[class=bottomiconhidebox]{height:6px !important; display:block !important;}
table[class=icon-bottom]{width:100% !important;}
td[class=hidebox]{height:15px !important; display:block !important;}
td[class=hidebox-footer]{height:10px !important; display:block !important;}
td[class=footerbox]{width:100% !important; display:block !important;}

*[class~=hide_on_mobile] { display: none !important;}

*[class~=show_on_mobile] {
display : block !important;
width : auto !important;
max-height: inherit !important;
overflow : visible !important;
float : none !important;

}

@media only screen and (max-width:450px)
{
body{width:auto!important;}
table[class=main]{width:320px !important;}
table[class=logo]{width:100% !important;}
table[class=righttop-details]{width:100% !important;}
table[class=social-top]{width:100% !important;}
td[class=viewonline-field]{padding: 10px 0px 0px 0px !important;}
td[id=viewonline]{text-align:center !important;}
td[class=productspace]{display:none !important;}
td[class=productbox]{width:100% !important; display:block;}
td[class=product-hidebox]{height:40px !important; display:block !important;}
td[class=subcontentbox]{width:100% !important; display:block;}
td[class=subcontent-space]{height:20px !important;}
td[class=bottomicon]{width:127px !important;}
table[class=bottomiconbox]{width:266px !important;}
td[class=bottomiconhidebox]{height:6px !important; display:block !important;}
table[class=icon-bottom]{width:100% !important;}
td[class=hidebox]{height:15px !important; display:block !important;}
td[class=hidebox-footer]{height:10px !important; display:block !important;}
td[class=footerbox]{width:100% !important; display:block !important;}

*[class~=hide_on_mobile] { display: none !important;}

*[class~=show_on_mobile] {
display : block !important;
width : auto !important;
max-height: inherit !important;
overflow : visible !important;
float : none !important;

}
@media only screen and (max-width: 480px){
.emailButton{
max-width:600px !important;
width:100% !important; }

.emailButton a{
display:block !important;
font-size:18px !important; }

td[class=moveinpx] { padding-left:45px !important; }
td[class=moveinpx2] { padding-left:35px !important; }

.endmatter{
max-width:600px !important;
width:100% !important; }
}

</style>

<!--[if IE]>
<style type="text/css">

@media only screen and (max-width:640px)
{
table[class=subimagebox]{width:100% !important; float:left;}
td[class=main-contentbox]{width:285px !important; float:left; padding-left:75px !important;}
td[class=contentbox]{width:386px !important; float:left; display:block; padding:0px 25px !important;}
table[class=subcontentbox]{width:386px !important; float:left;}
td[class=footerbox]{width:100% !important; float:left; display:block
td[class=productbox]{width:336px !important; float:left; display:block; padding:0px 50px !important;}

}

@media only screen and (max-width:450px)
{
table[class=subimagebox]{width:100% !important; float:left;}
td[class=main-contentbox]{width:285px !important; float:left; padding-left:12px !important;}
td[class=contentbox]{width:100% !important; float:left; display:block; padding:0px !important;}
table[class=subcontentbox]{width:100% !important; float:left;}
td[class=footerbox]{width:100% !important; float:left; display:block;}
td[class=productbox]{width:100% !important; float:left; display:block; padding:0px !important;}

}

</style>
<![endif]-->

<!--[if gte mso 16]>
<style type="text/css">
.righttop-details{width:250px !important;}
.icon-bottom{width:286px !important;}
.subimagebox{width:240px !important;}
*[class~=hide_on_mobile] { display: none !important;}

*[class~=show_on_mobile] {
display : none !important;
width : auto !important;
max-height: inherit !important;
overflow : visible !important;
float : none !important; font-size: 0;mso-hide:all;}

</style>
<![endif]-->

</head>

<body>

</td>
<td width="5"></td>
</tr>
</table>
</td>
</tr>

<tr>

<span style="color:#ffffff; font-family:Arial, Verdana, Trebuchet MS, sans-serif; font-size:14px; font-weight:500; line-height:20px; padding:10px 0px 10px 0px;">
<a style="text-decoration:underline; color:#ffffff;" href="http://sunovion.clinicalimpressions.com/Ferguson"><b>View</b></a><b> a Clinical Perspective From Dr. Joans ►</b></span>

</td>
</tr>
</table>
</td>
<td width="5"></td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>

DC

0

David Condrey replied 2016-03-19 08:54:51

You found that here: http://stackoverflow.com/a/33076622/1922144

The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

Hide & Show TD in Gmail, Outlook & Yahoo

Sign in to Community

Join the Litmus Community

Sign up to Community

Forgot password