been struggling with this issue for a bit now and its really bugging me. Basically I have some email templates that I've been working on, they work fine on all clients (Litmus tests) except for Gmail specifically on iOS, Android works fine. The issue I'm having is that I want all my tables to me 100% width so they're all the same size, however gmail resizes the tables seemingly based off the content inside.

Heres a section of my code:

<tr  style="background-color:#fff;color:#23282b">
<td>
    <table  cellpadding="0" cellspacing="0" border="0" role="presentation" width="100%"
        style="margin:0 auto;width:100%!important;max-width:600px!important">
        <tr>
            <td  align="center" valign="top" style="padding:0 15px 10px">
                <table cellpadding="0" cellspacing="0" border="0" role="presentation" width="100%">
                    <tr>
                        <td 
                            style="padding:30px 20px 20px;background-color:#fff;color:#23282b;border:solid 1px #eee">
                            <h2
                                style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 20px;font-size:18px;font-weight:700;line-height:22px">
                                YOUR DELIVERY DETAILS</h2>
                            <table  cellpadding="0" cellspacing="0" border="0"
                                role="presentation" width="100%"
                                style="width:100%!important;max-width:600px!important">
                                <tr>
                                    <td style="vertical-align:top;padding-right:8.5px;padding-left:0">
                                        <h3
                                            style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 15px;font-size:16px;font-weight:700;line-height:22px">
                                            Delivery Service</h3>
                                    </td>
                                    <td style="vertical-align:top;padding-right:0">
                                        <p
                                            style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 10px;font-size:16px;font-weight:400;margin-bottom:15px;line-height:22px">
                                            Next Day</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="vertical-align:top;padding-right:8.5px;padding-left:0">
                                        <h3
                                            style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 15px;font-size:16px;font-weight:700;line-height:22px">
                                            Delivery Address</h3>
                                    </td>
                                    <td style="vertical-align:top;padding-right:0">
                                        <p
                                            style="font-family:GTAmerica-Regular,Helvetica,Arial,sans-serif;margin:0 0 10px;font-size:16px;font-weight:400;margin-bottom:15px;line-height:22px">
                                            Fake Name <br>Fake House <br>Fake Street
                                            <br>Fake Town <br>UK <br>Fake Postcode</p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</td>

On my phone it looks like this:

Email Result on iOS 15 gmail

Is there any way to fix this? On every other client it expands to 100% no issue, thank you!

CodePudding user response：

This sounds like this might be due to this bug, where Gmail adds a .munged class to <table>s and <td>s with a width:auto!important.

A solution would be to add a min-width:100% to each <table> and <td> potentially impacted.