How do I get CSS media queries to work correctly on Outlook/Gmail?

Question

It appears that when I code the below into an email and send it, Outlook and Gmail (and probably other desktop email clients) render both tables (which is the problem I'm trying to solve for). But, when I view on my mobile, it complies with the CSS media queries and only displays the table element with a class of "mobile". I am unsure why this is, am I doing anything wrong? Here's my code:

<style type="text/css" media="screen">
    @media only screen and (max-width: 480px) and (min-width: 0px) {
        table[class="desktop"] {
            display: none;
        }

        table[class="mobile"] {
            display: block;
        }
    }

    @media only screen and (max-width: 4000px) and (min-width: 481px) {
        table[class="desktop"] {
            display: block;
        }

        table[class="mobile"] {
            display: none;
        }
    }
</style>
<table border="1" cellpadding="10" cellspacing="0" width="100%" class="desktop">
    <tr>
        <td align="center" colspan="4">Standard Option
        </td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td colspan="4" align="right" style="text-align: center;">NON-POSTAL PREMIUM
        </td>
    </tr>
    <tr>
        <td></td>
        <td>Code</td>
        <td>Biweekly</td>
        <td>Monthly (Retirees)</td>
    </tr>
    <tr>
        <td>Self Only</td>
        <td>341</td>
        <td>$57.84</td>
        <td>$125.31</td>
    </tr>
    <tr>
        <td>Self Plus One</td>
        <td>343</td>
        <td>$124.35</td>
        <td>$269.42</td>
    </tr>
</table>
<table border="1" cellpadding="" cellspacing="0" width="480" class="mobile">
    <tr>
        <td align="center" valign="top">
            <table align="left" border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td>Standard Option (NON-POSTAL PREMIUM)</td>
                </tr>
            </table>
            <br style="clear: both;" />
            <table align="left" border="1" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td><b>Self Only</b></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Code</td>
                    <td>341</td>
                </tr>
                <tr>
                    <td>Biweekly</td>
                    <td>$57.84</td>
                </tr>
                <tr>
                    <td>Monthly (Retirees)</td>
                    <td>$125.31</td>
                </tr>
            </table>
            <br style="clear: both;" />
            <table align="left" border="1" cellpadding="10" cellspacing="0" width="100%">

                <tr>
                    <td><b>Self Plus One</b></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Code</td>
                    <td>343</td>
                </tr>
                <tr>
                    <td>Biweekly</td>
                    <td>$124.35</td>
                </tr>
                <tr>
                    <td>Monthly (Retirees)</td>
                    <td>$269.42</td>
                </tr>

            </table>
            <br style="clear: both;" />
            <table align="left" border="1" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td><b>Self and Family</b></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Code</td>
                    <td>343</td>
                </tr>
                <tr>
                    <td>Biweekly</td>
                    <td>$136.78</td>
                </tr>
                <tr>
                    <td>Monthly (Retirees)</td>
                    <td>$296.36</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Here's a screenshot of Outlook's rendering:

And here's a screenshot of my mobile device's rendering:

Answer 1

As far as I know, Outlook does not really have any solid support for media queries unfortunately and is often 'left out' when it comes to mobile responsive emails.

This link here should help in explaining email responsivity and givs you a good amount of detail.

To create html emails, I often use third party software because coding for different mail clients is a real pain. I use beefree.io to create email templates which I can just download in HTML 5 format.