Gmail ignoring display:none

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:

@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;
}

My first table works correctly, but my second table doesn't hide on desktop

<table class="hide">
  <tbody>
    <tr>
      <td> Show this on desktop. Hide on mobile.

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

<table class="hidedesktop" style="overflow:hidden; display:none; line-height:0px; max-height:0px; visibility: hidden;">
  <tbody>
    <tr>
      <td> Hide on desktop. Show on mobile </td>
    </tr>
  </tbody>
</table>

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.

Solution

So, after looking further into an email from J.Crew that I was trying to replicate for practice, I have found the solution.

.hide {display:none !important; width:0px !important;}

.showme {display:table !important;
    width:100% !important;
    overflow:visible !important;
    float:none !important;
    max-height:inherit !important;
    line-height:auto !important;
    margin-top:0px !important;
    visibility:inherit !important;}

.mobilenav {
    width:100% !important;
    margin: 0 auto !important;}

I found that wrapping my table in a parent div along with a few other CSS rules did the trick!

<table class="hide">
  <tbody>
    <tr>
      <td> Show this on desktop. Hide on mobile.</td>
    </tr>
  </tbody>
</table>

<div class="showme" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; line-height:0px; visibility:hidden;">
<table class="mobilenav showme" width="100%" style="display:none;">
  <tbody>
    <tr>
      <td> Hide on desktop. Show on mobile </td>
    </tr>
  </tbody>
</table>
</div>

While it works on gmail desktop, I could not get the mobile table to display in the gmail app. But, only the top table displayed (as if I was viewing on a desktop), so it worked out perfectly for me.

This was also litmus tested!