title: Gmail ignoring display:none
body: <p>What I'm trying to do is have two tables that are either visible or not visible depending on what device you are viewing on. Here is my media query:</p>
  
  <pre><code>@media only screen and (max-width: 480px) {
  .hidedesktop {
     display:table !important; 
     overflow:visible !important; 
     line-height:100% !important; 
     visibility:visible !important;}
  
  .hide { 
     display:none !important; 
     width:0px !important;
  }
  </code></pre>
  
  <p>My first table works correctly, but my second table doesn't hide on desktop</p>
  
  <pre><code>&lt;table class="hide"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt; Show this on desktop. Hide on mobile.
  
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;table class="hidedesktop" style="overflow:hidden; display:none; line-height:0px; max-height:0px; visibility: hidden;"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt; Hide on desktop. Show on mobile &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Anyone have a fix for this? From what I can tell, this is only an issue in gmail, but I fear I'll have this issue with other email clients.</p>