Невозможно сделать так, чтобы столбцы таблиц в html-письмах становились полноразмерными на мобильных устройствах.

Question

Я строю таблицу в электронном письме и пытаюсь: а) заставить столбцы складываться друг на друге на мобильном телефоне и б) заставить столбцы работать на полную ширину на мобильном телефоне.Я получил столбцы в стеке, но они игнорируют медиа-запрос полной ширины.

table, td { mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; } /*Stops Outlook from adding extra spacing to tables*/
        table { border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important; margin: 0 auto !important; }

@media screen and (max-width: 500px) {
            .stack-column, .stack-column-center { display: block !important;width: 100% !important;max-width: 100% !important;direction: ltr !important; padding-left:0px !important; padding-right:0px !important; padding-bottom:0px !important } /*Forces table cells into full-width rows*/
            .stack-column-center { text-align: center !important; padding-left:0px !important; padding-right:0px !important; } /* And center justify these ones. */
            .center-on-narrow { text-align: center !important;display: block !important;margin-left: auto !important;margin-right: auto !important;float: none !important; } /*Generic utility class for centering. Useful for images, buttons, and nested tables*/
            table.center-on-narrow { display: inline-block !important; }
            .email-container p { font-size: 17px !important; } /*Adjusts typography on small screens to improve readability*/
            .middle-article-mobile-pt { padding-top: 60px !important; }
            .middle-article-mobile-pb { padding-bottom: 60px !important; }
            .text-right-mobile { padding: 0px !important; }
            .orange-button-main, .light-blue-button-main, .grey-button-main, .light-blue-button, .grey-button, .orange-button { max-width:600px !important; width:100% !important; }
            .orange-button-main, .light-blue-button-main, .grey-button-main, .light-blue-button, .grey-button, .orange-button  a{ display:block !important; font-size:17px !important; text-align:center; padding-left:0px !important; padding-right:0px !important; }
            .h1, .h2, .body-copy, .body-copy-2, .body-h1, .body-h2, .light-blue-button, .orange-button, .grey-button, .mobile-center { text-align:center !important; }
            .emailImage{ height:auto !important; max-width:600px !important; width: 100% !important; }
            #location-table {width:100%;}
            .column {display:block !important; width:100% !important; text-align:center; clear:both;}
        }

<tr>
            <td style="padding-left:50px;padding-right:50px;padding-top:20px;background-color:#fff;">
            <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" id="location-table">
                <tbody>
                    <tr>
                    <td colspan="4" style="text-align:center;background-color:#0590c7;"><p style="font-family:Arial,sans-serif;font-weight:bold;text-transform:uppercase;color:#fff;margin:10px 0;">Albany & Rutland</p></td>
                    </tr>
                    <tr>
                        <td class="column" width="25%" style="vertical-align:middle;padding-left:5px;"><p style="font-family:Arial, sans-serif;font-size:13px;color:#555;font-weight:bold;padding:0;margin:15px 0 10px;">Location name location name</p></td>
                        <td class="column" width="25%" style="vertical-align:middle;padding-left:5px;"><p style="font-family:Arial, sans-serif;font-size:13px;color:#555;padding:0;margin:15px 0 10px;">1234 Street St.<br> City, XX 1234</p></td>
                        <td class="column" width="25%" style="vertical-align:middle;padding-left:5px;"><p style="font-family:Arial, sans-serif;font-size:13px;color:#555;padding:0;margin:15px 0 10px;">description description description description description
</p></td>
                        <td class="column" width="25%" style="vertical-align:middle;padding-left:5px;"><table align="center" border="0" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <td>
                                    <table border="0" cellpadding="0" cellspacing="0">
                                        <tbody>
                                            <tr>
                                                <td align="center" bgcolor="#fff" class="pdEditable" pardot-data="" style="border-radius: 2px; background: rgb(255,255,255);"><a class="light-blue-button" href="UPDATE" style="font-size:14px;font-family:Arial, sans-serif;color:#0590c7;text-decoration:none !important;font-style:normal;text-transform:uppercase;font-weight:bold;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;padding-top:10px;padding-bottom:10px;padding-right:18px;padding-left:18px;border-width:2px;border-style:solid;border-color:#0590c7;display:inline-block;background-color:#fff;"><!--[if mso]>&nbsp;<![endif]-->Register <!--[if mso]>&nbsp;<![endif]--></a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table></td>
                    </tr>
                </tbody>
                </table>
            </td>
        </tr>

Я ожидал, что медиазапросы # location-table и .column будут складывать столбцы и заставлять их иметь полную ширину, но они не будут иметь полную ширину.