Outlook Web App "display :none" not working - html

Question

I am designing a responsive email template and i have a slight problem on Outlook Web app.
I found out that it removes classes so there is no point in using media queries so i try to hide a tr element like this :
<tr style="mso-hide:all;
display:none;
height:0;
width:0px;
max-height:0px;
overflow:hidden;
line-height:0px;
float:left;">
But it still shoes up. Any Ideas?

Answer 1

You can add the
<tr style="visibility: hidden"></tr>
However, this only makes it not visible... It is still there and taking up space

Answer 2

Use such class:
.hide {
display: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}

Answer 3

Blockquote
I'm not entirely sure way you need a hidden table row, but try this:
<tr style="mso-hide:all;
display:none!important;
height:0;
width:0px;
max-height:0px;
overflow:hidden;
line-height:0px;
float:left;">
This may not work as email clients remove some of the CSS, specially lines that will hide code. It will also remove any links to js or external code. So !important will probably be ignored as well.
Lastly trying to hide content is a huge red flag for spam filters, likely whatever you send with this will end up in the spambox.

Answer 4

We use a combination of tables to hide and show different content. Depending on the size of the image you can adjust the height and width of the td.
Styles:
td.inner { display:none; }
table.promo_1_pic_1 { float: none; width:100%; height:95px; }
table.promo_1_pic_1 td { background: #fff url(test.jpg) no-repeat 0px !important; }
table.promo_2_pic_2 { float: none; width:100%; height:95px; }
table.promo_2_pic_2 td { background: #fff url(test.jpg) no-repeat 0px !important; }
table.promo_3_pic_3 { float: none; width:100%; height:109px; }
table.promo_3_pic_3 td { background: #fff url(test.jpg) no-repeat 0px !important; }
table.promo_4_pic_4 { float: none; width:100%; height:109px; }
table.promo_4_pic_4 td { background: #fff url(test.jpg) no-repeat 0px !important; }
HTML:
<td class="desktop-table" bgcolor="#ffffff" style="padding:20px; background-color:#ffffff; font-family: Arial, Helvetica, sans-serif;">
<!-- promo 1 content -->
<table class="promo_1_pic_1"><tr><td></td></tr></table>
<table class="promo_2_pic_2"><tr><td></td></tr></table>
<table class="promotion">
<tr>
<td class="inner"><img src="test.jpg" alt=""/>
</td>
<td class="inner"><img src="test.jpg" alt=""/>
</td>
</tr>
</table>
</td>
<td class="desktop-table" bgcolor="#ffffff" style="padding:0 10px 10px 10px; background-color:#cfe6f6; font-family:Arial, Helvetica, sans-serif;">
<!-- promo 1 content -->
<h3 style="margin:25px 0px 0px 22px;">You might also be interested in:</h3>
<table class="promo_3_pic_3"><tr><td></td></tr></table>
<table class="promo_4_pic_4"><tr><td></td></tr></table>
<table class="promotion">
<tr>
<td class="inner"><img src="test.jpg">
</td>
<td class="inner"><img src="test.jpg">
</td>
</tr>
</table>
</td>

Answer 5

I had the same problem all day yesterday, I found this question here and seems no correct answer. Then I searched in Litmus community forum. And fortunately saw a comment saying:
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.
So I added mso-hide:all to all child tables, and it worked!

Answer 6

Wrap whatever you need to hide in a div.
div {
width: 0;
height: 0;
overflow: hidden;
}

Answer 7

To keep this question up to date, OWA does accept classes now, and can be targeted by adding [owa] to the start of the class list in css.
[owa] .hide,
.hide {
display: none!important;
mso-hide: all;
width: 0;
min-width: 0;
max-width: 0;
height:0;
min-height: 0;
max-height: 0;
overflow: hidden;
font-size: 0px;
line-height: 0px;
}
With this adding .hide to the element you want to hide, will hide it in all popular email clients, if you want to hide from just outlook (excl OWA), then I'd suggest using conditional code. The following table will be hidden in all email clients. Although it will appear when the email is forwarded from certain email clients.
<!--[if !mso]><!-- -->
<table class="hide">
Hide me
</table>
<!--<![endif]-->