Android上Gmail中的Table元素未100%扩展
我正在做一个两栏响应式电子邮件设计，我对Android上的Gmail有一个问题，它的表宽没有扩展到两栏大小的100%。具有背景颜色的表应该填充列。请参阅下面代码结果的屏幕截图。此屏幕截图显示了该问题。下图是我正在使用的代码。下面是相同代码的jfiddle： 我找到了另一个post（），我已经在使用这个方法，但它不起作用。我知道我忽略了一些简单的事情。我会继续努力的。可能使用最小宽度 谢谢你的帮助和建议 CSSAndroid上Gmail中的Table元素未100%扩展,android,html,responsive-design,gmail,html-email,Android,Html,Responsive Design,Gmail,Html Email,我正在做一个两栏响应式电子邮件设计，我对Android上的Gmail有一个问题，它的表宽没有扩展到两栏大小的100%。具有背景颜色的表应该填充列。请参阅下面代码结果的屏幕截图。此屏幕截图显示了该问题。下图是我正在使用的代码。下面是相同代码的jfiddle： 我找到了另一个post（），我已经在使用这个方法，但它不起作用。我知道我忽略了一些简单的事情。我会继续努力的。可能使用最小宽度 谢谢你的帮助和建议 CSS .ReadMsgBody { width: 100%;
.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; }
}
<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>
标题
同一权利必须在非小商品不存在的情况下，在非小商品不存在的情况下，不履行职责。Lorem ipsum Sint reprehenderit magna eu labourum officia labour在voluptate du中坐在aut aut fugiat，在nisi commodo中坐在aut fugiat aliqua中，在eiusmod do labourum id labour mini sit aliquip中坐在aut fugiat。
标题
同一权利必须在非小商品不存在的情况下，在非小商品不存在的情况下，不履行职责。Lorem ipsum Sint reprehenderit magna eu labourum officia labour在voluptate du中坐在aut aut fugiat，在nisi commodo中坐在aut fugiat aliqua中，在eiusmod do labourum id labour mini sit aliquip中坐在aut fugiat。
<!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>
#Outlook{宽度：650px！重要；}
表[class=“2列”]{宽度：48%！重要性