如何在 html 电子邮件中的 Outlook 2007、2010、2013 上使用不显示

Question

I am trying to get a some content to display none in desktop and show in the mobile version. It works fine in most email clients but outlook 07,10,13 on windows devices are giving me a problem

                <tr class="mobileshow yahoohide hideit" align="center">
                    <th>
                        <table border="0" cellpadding="0" cellspacing="0" align="center"  >
                            <tr>
                                <th>
                                    <table border="0" cellpadding="0" cellspacing="0">
                                        <tr>
                                            <td>
                                               <a href="https://itunes.apple.com/us/app/meijer/id583093664?mt=8">
                                                   <img src="AppStore.png" width="100" height="auto" style=" text-decoration: none; border:0px;" class="stretch hideit"/>
                                                </a>
                                            </td>
                                        </tr>

                                    </table>
                                </th>
                                <th>
                                    <table border="0" cellpadding="0" cellspacing="0"  >
                                        <tr>
                                                <img src="space.gif" width="10" />
                                        </tr>
                                    </table>
                                </th>
                                <th>
                                    <table border="0" cellpadding="0" cellspacing="0"  >
                                         <tr>
                                            <td>
                                               <a href="https://play.google.com/store/apps/details?id=com.meijer.mobile.meijer&hl=en">          
                                                   <img src="googlePlay.png" width="100" height="auto" style=" text-decoration: none; border:0px;" class="stretch"/>
                                                </a>
                                            </td>
                                        </tr>
                                    </table>
                                </th>
                            </tr>
                        </table>    
                        <table border="0" cellpadding="0" cellspacing="0" >
                            <tr>
                                <th>
                                    <table style="line-height:30px !important;" border="0" cellpadding="0" cellspacing="0"  >
                                            <tr>
                                                    <img src="space.gif" width="50" />
                                            </tr>
                                    </table>
                                </th>
                            </tr>
                            <tr>
                                <th>
                                    <table border="0" cellpadding="0" cellspacing="0" >
                                        <tr>
                                            <td>
                                                    <img src="meijer.png" width="100" height="auto" style=" text-decoration: none; border:0px;" class="stretch"/>
                                            </td>
                                        </tr>
                                    </table>
                                </th>
                                <th>
                                    <table style="line-height:30px !important;" border="0" cellpadding="0" cellspacing="0"  >
                                            <tr>
                                                    <img src="space.gif" width="50" />
                                            </tr>
                                    </table>
                                </th>
                                <th>
                                    <table border="0" cellpadding="0" cellspacing="0"  >
                                        <tr>
                                            <td>
                                                <img src="MPerksLogo.png" width="100" height="auto" style=" text-decoration: none; border:0px;" class="stretch"/>
                                            </td>
                                        </tr>
                                    </table>
                                </th>
                            </tr>
                        </table>
                    </th>
                </tr>

I have tried using

<div class="mobilecontent" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;">
  MOBILE CONTENT
</div>

but this method did not work and i also tried applying the mso-hide:all and display none directly inline the style.

Not sure what else I can do.

Answer 1

In order for you to hide everything in Outlook you need to have mso-hide:all on every item I have seen for example if you have a table inside a div , it has to have mso-hide:all on the table.

<div class="mobilecontent" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;">
<table style="display:none;mso-hide:all;">[row and data]</table></div>

Hope the above example helps