表格元素在Android上的Gmail中不会100％扩展
我正在开发一个两列响应式电子邮件设计，我在Android上遇到了一个问题，表格宽度没有扩大到两列中每一列的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>
1 个答案:
答案 0 :(得分：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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？