Table element not expanding 100% in Gmail on Android

Question

I am working on a two-column responsive email design and I am having an issue with Gmail on Android with table width not expanding 100% of the size of each of the two columns. The tables that have a background color are supposed to fill the columns. See screen shot below of the result of the code below. This screen shot shows the issue. Below the image is the code I am using. Here is the jfiddle of the same code: http://jsfiddle.net/f37m7e88/

I found another post (100% width tables don't work in Gmail Android) and I am already using this method and it's not working. I know it has to be something simple I am overlooking. I am going to keep plugging away at this. Possibly using min-width?

Thank you for your help and suggestions.

gmail on android CSS

.ReadMsgBody {
            width: 100%;
            background-color: #ffffff;
        }

        .ExternalClass {
            width: 100%;
            background-color: #ffffff;
            line-height:100% !important;
        }

        body {
            width: 100%;
            background-color: #ffffff;
            margin: 0;
            padding: 0;
            -webkit-font-smoothing: antialiased;
        }

        * {font-family: Tahoma, Arial, sans-serif; font-size: 16px;}

        table {
            border-collapse: collapse;
        }

        p {
            mso-table-lspace:0;
            mso-table-rspace:0; 
        }
    @media only screen and (max-width: 640px) {
        table[yahoo] .maxWidth { width: 540px !important; }
        table[yahoo] .center { text-align: center !important; }
        table[yahoo] .nolrpadding { padding-left: 0 !important; padding-right: 0 !important; }
    }

    @media only screen and (max-width: 479px) {
        table[yahoo] .maxWidth { width: 420px !important; }
        table[yahoo] .center { text-align: center !important; }
    }

HTML

<table yahoo="fix" width="100%" bgcolor="#ebebeb" cellspacing="0" cellpadding="0" border="0">
    <tbody>
        <tr>
            <td valign="top">
                <table width="650" align="center" bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" class="maxWidth">
                    <tbody>
                        <tr>
                            <td valign="top">
                                <table width="48%" align="left" cellspacing="0" cellpadding="0" border="0" class="maxWidth">
                                    <tbody>
                                        <tr>
                                            <td valign="top" width="100%" class="maxWidth">
                                                <table width="100%" cellspacing="0" cellpadding="0" border="0" class="maxWidth">
                                                    <tbody>
                                                        <tr>
                                                            <td width="100%" style="width: 100% !important;" align="center" valign="top">
                                                                <table border="0" cellpadding="10" cellspacing="0" style="width:100% !important;border-collapse:collapse" width="100%" class="maxWidth">
                                                                    <tbody>
                                                                        <tr>
                                                                            <td bgcolor="#497fbd" width="100%" align="center" style="padding: 10px 0px;">
                                                                                <span>HEADER</span>
                                                                            </td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <table cellspacing="0" cellpadding="0" border="0" class="maxWidth">
                                                    <tbody>
                                                        <tr>
                                                            <td valign="top" style="padding: 10px 36px;"><span style="color:#333333;">Lorem ipsum Sunt consectetur eiusmod pariatur Ut culpa adipisicing ex id adipisicing est aliqua ut cillum aliqua ex do non sed quis minim veniam consectetur in officia veniam cupidatat non minim commodo sunt nulla cillum aute magna Excepteur dolor. Lorem ipsum Sint reprehenderit magna eu laborum officia laboris sit aute aute fugiat in voluptate Duis non voluptate nostrud in nisi commodo do in aute fugiat aliqua in eiusmod do laborum id laborum minim sit aliquip.</span></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table width="48%" align="left" cellspacing="0" cellpadding="0" border="0" class="maxWidth">
                                    <tbody>
                                        <tr>
                                            <td valign="top" width="100%" class="maxWidth">
                                                <table width="100%" cellspacing="0" cellpadding="0" border="0" class="maxWidth">
                                                    <tbody>
                                                        <tr>
                                                            <td valign="top" align="center">
                                                                <table align="center" width="90%" bgcolor="#cccccc" cellspacing="0" cellpadding="0" border="0" class="maxWidth">
                                                                    <tbody>
                                                                        <tr>
                                                                            <td width="100%" align="center" style="padding: 10px 0px;"><span>HEADER</span></td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <table cellspacing="0" cellpadding="0" border="0" class="maxWidth">
                                                    <tbody>
                                                        <tr>
                                                            <td valign="top" style="padding: 10px 36px;"><span style="color:#333333;">Lorem ipsum Sunt consectetur eiusmod pariatur Ut culpa adipisicing ex id adipisicing est aliqua ut cillum aliqua ex do non sed quis minim veniam consectetur in officia veniam cupidatat non minim commodo sunt nulla cillum aute magna Excepteur dolor. Lorem ipsum Sint reprehenderit magna eu laborum officia laboris sit aute aute fugiat in voluptate Duis non voluptate nostrud in nisi commodo do in aute fugiat aliqua in eiusmod do laborum id laborum minim sit aliquip.</span></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

The only solution I have found is to create a transparent image the goes under the table to force it to expand the width of the column, but that is not the approach I was hoping for. — ja408, Jul 20 '15 at 20:29

score 1 · Answer 1 · answered Jul 21 '15 at 12:52

I had to change your code a little, but this should help and it will also make it responsive in gmail app on iOS as well. You will likely need to tweak some more for other clients to make work as you fill in content (MSO conditional, desktop media queries, etc), but this should be a good starting point.

I have not really figured out the why of your code not working, but this alternative should allow you to meet your need without using images or white space to force width.

See below code:

<!doctype HTML>
<html>
<head>
<style>
#Outlook {width:650px !important;}
table[class="2column"] {width:48% !important;}

@media only screen and (max-width: 640px) {
#Outlook {width:100% !important;}
}

@media only screen and (max-width: 480px) {
table[class="2column"] {width:100% !important;}
}
</style>
</head>
<body>
<table width="100%" bgcolor="#ebebeb" cellspacing="0" cellpadding="0" border="0">
    <tbody>
        <tr>
            <td valign="top">
                <table width="100%" align="center" bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" id="Outlook" style="max-width:650px;">
                    <tbody>
                        <tr>
                            <td valign="top">
                                <table width="100%" align="left" cellspacing="0" cellpadding="0" border="0" class="2column" >
                                    <tbody>
                                        <tr>
                                            <td valign="top" width="100%" >
                                                <table bgcolor="#497fbd" width="100%" cellspacing="0" cellpadding="0" border="0" >
                                                    <tbody>
                                                        <tr>
                                                            <td bgcolor="#497fbd" width="100%" style="width: 100% !important;" align="center" valign="top">
                                                                <table border="0" cellpadding="10" cellspacing="0" style="width:100% !important;border-collapse:collapse" width="100%" >
                                                                    <tbody>
                                                                        <tr>
                                                                            <td bgcolor="#497fbd" width="100%" align="center" style="padding: 10px 0px;">
                                                                                <span>HEADER</span>
                                                                            </td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <table cellspacing="0" cellpadding="0" border="0" >
                                                    <tbody>
                                                        <tr>
                                                            <td valign="top" style="padding: 10px 36px;"><span style="color:#333333;">Lorem ipsum Sunt consectetur eiusmod pariatur Ut culpa adipisicing ex id adipisicing est aliqua ut cillum aliqua ex do non sed quis minim veniam consectetur in officia veniam cupidatat non minim commodo sunt nulla cillum aute magna Excepteur dolor. Lorem ipsum Sint reprehenderit magna eu laborum officia laboris sit aute aute fugiat in voluptate Duis non voluptate nostrud in nisi commodo do in aute fugiat aliqua in eiusmod do laborum id laborum minim sit aliquip.</span></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table width="100%" align="left" cellspacing="0" cellpadding="0" border="0" class="2column" >
                                    <tbody>
                                        <tr>
                                            <td valign="top" width="100%" >
                                                <table width="100%" cellspacing="0" cellpadding="0" border="0" >
                                                    <tbody>
                                                        <tr>
                                                            <td valign="top" align="center">
                                                                <table align="center" width="90%" bgcolor="#cccccc" cellspacing="0" cellpadding="0" border="0" >
                                                                    <tbody>
                                                                        <tr>
                                                                            <td width="100%" align="center" style="padding: 10px 0px;"><span>HEADER</span></td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <table cellspacing="0" cellpadding="0" border="0" >
                                                    <tbody>
                                                        <tr>
                                                            <td valign="top" style="padding: 10px 36px;"><span style="color:#333333;">Lorem ipsum Sunt consectetur eiusmod pariatur Ut culpa adipisicing ex id adipisicing est aliqua ut cillum aliqua ex do non sed quis minim veniam consectetur in officia veniam cupidatat non minim commodo sunt nulla cillum aute magna Excepteur dolor. Lorem ipsum Sint reprehenderit magna eu laborum officia laboris sit aute aute fugiat in voluptate Duis non voluptate nostrud in nisi commodo do in aute fugiat aliqua in eiusmod do laborum id laborum minim sit aliquip.</span></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

I will give this a try and update this when I find out more. — ja408, Jul 27 '15 at 22:45

Table element not expanding 100% in Gmail on Android

1 Answers1