android - Android 版 Gmail 中的表格元素未展开 100%

Question

我正在设计一个两列的响应式电子邮件设计，我在 Android 上使用 Gmail 时遇到问题，表格宽度没有扩展到两列中每一列大小的 100%。具有背景颜色的表格应该填充列。请参阅下面代码结果的屏幕截图。此屏幕截图显示了该问题。图片下方是我正在使用的代码。这是相同代码的 jfiddle:http://jsfiddle.net/f37m7e88/

我找到了另一篇文章 ( 100% width tables don't work in Gmail 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>

Answer 1

我不得不稍微更改一下您的代码，但这应该会有所帮助，而且它还会使它在 iOS 上的 gmail 应用程序中响应。您可能需要为其他客户端进行更多调整，以便在您填写内容(MSO 条件、桌面媒体查询等)时正常工作，但这应该是一个很好的起点。

我还没有真正弄清楚为什么你的代码不起作用，但这种替代方案应该可以让你满足你的需求，而无需使用图像或空白来强制宽度。

见下面代码:

<!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>