gmail.com email client ignores the display: inline-block; CSS style on a table element (block element)

Question

I am sorry to ask another question about html email, but html emails are more complicated than i thought.

I want to have 2 columns next to each other when a user views the email on desktop (big screen) clients, and I want this 2 same columns to stack on top of each other when viewed on mobile clients.

I know my apporach is wrong, and therefore it doesn't work.

I have created 2 tables, which are block elements by default. I am trying to make these 2 tables inline with MEDIA QUERY.

By default, these 2 tables are block elements, but I want to make them inline on big screens ONLY, and leave them as default on mobile screens.

GMAIL PROBLEM : I have created the following code, but for some reasons when I view the email on my Gmail.com account, the 2 column (tables) DO NOT inline. They continue to be block elements.

When i view this email on yahoo or on a browser, the 2 tables are next to each other (inlined), No problem there.

<table width="100%" bgcolor="#f6f8f1" border="1" cellpadding="0" cellspacing="0">
<tr>
    <td>
        <table width="100%" class="wrapper" align="center" cellpadding="0" cellspacing="0" border="0" style="max-width:600px; border:1px #666666 solid;">
            <tr>
                <td>
                    <!-- 1st Row -->
                    <table width="100%" align="center" bgcolor="002B70" border="0" cellpadding="5" cellspacing="0">
                        <tr>
                            <td>
                                <!-- 1st table column. Block element by default. want this to be inline element on all DESKTOP clients, but leave it as default on mobile clients -->
                                <table class="desktop-column">
                                    <tr>
                                        <td style="text-align:center;">
                                            <a href="#" style="text-decoration:none; color:#ffffff">
                                                <img src="#" alt="#" />
                                            </a>
                                        </td>
                                    </tr>
                                </table>
                                <!-- 2nd table. Block element by default, want this to be inline element on all DESKTOP clients, but leave it as default on mobile clients -->
                                <table class="desktop-column">
                                    <tr>
                                        <td style="text-align:center;" id="menu">
                                            <a href="#" style="text-decoration:none;color:#ffffff">MENU1</a>
                                            <a href="#" style="text-decoration:none;color:#ffffff">MENU2</a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>

The CSS is as below:

@media screen and (min-device-width: 601px), screen and (min-width:601px) {
    /* GMAIL.com IGNORING THIS. I want this element to be inline on DESKTOP clients */
    *[class="desktop-column"] {display: inline-block!important; background-color:red;}
}
@media screen and (max-width: 525px) {
    *[id="menu"] {font-size:12px;}
}

Thank you for your help,

Answer 1

Gmail 不支持媒体查询，可以在此处找到有关媒体查询支持的更多信息