问题描述
我在电子邮件中建立了一个表格,并且在Android版Gmail上遇到了奇怪的行为。勾选标记应该稍微填充一下,这就是为什么我在移动设备中将表格的宽度设置为90%。
它适用于所有电子邮件客户端,但不适用于Gmail,因为Gmail的表格内容一直达到100%。
请查看屏幕截图以及我的桌子的代码。
感谢您的帮助!
.Box {
Box-shadow: 0 0px 0px 0px rgba(0,0.2);
border-radius: 14px !important;
overflow: hidden;
}
.content-block {
padding: 0px 0px 0px 0px !important;
}
@media screen and (max-width: 450px) {
.w100p {
width: 90% !important;
max-width: 100% !important;
min-width: 80% !important;
height: auto !important;
}
}
<table class="w100p" width="400" style="width: 400px; margin: 0 auto" align="center" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td style="padding: 10px 0 10px 0; border-top: 0px solid #D2D7CA;" align="center">
<table class="w100p" width="400" style="width: 400px;margin-left: 0 auto" align="center" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td style="width: 40px; vertical-align: top;" valign="top" align="left">
<img border="0" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/ae52a6e2-ca6a-4d8e-8944-532f952aae85/6e96bea4-bad3-11e9-843d-e26a1b8410ae/Icons/Check_blue_30px.png" width="26" alt="✓" style="display:block; padding: 0; margin: 0;font-size: 20px;font-weight: bold;font-family: arial,sans-serif;color: #DF4E3C;" />
</td>
<td style="vertical-align: top;" valign="top" align="left">
<p style="margin: 0;font-family: 'Arial';font-size: 16px;line-height: 20px;color: #252e5d;text-align: left;padding-bottom: 0px;mso-margin-bottom-alt: 0px;">Book and manage your car entirely online</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 20px 0 10px 0; border-top: 0px solid #D2D7CA;" align="center">
<table class="w100p" width="400" style="width: 400px;margin: 0 auto;" align="center" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td style="width: 40px; vertical-align: top;" valign="top" align="left">
<img border="0" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/ae52a6e2-ca6a-4d8e-8944-532f952aae85/6e96bea4-bad3-11e9-843d-e26a1b8410ae/Icons/Check_blue_30px.png" width="26" alt="✓" style="display:block; padding: 0; margin: 0;font-size: 20px;font-weight: bold;font-family: arial,sans-serif;color: #DF4E3C;" />
</td>
<td style="vertical-align: top;" valign="top" align="left">
<p style="margin: 0;font-family: 'Arial';font-size: 16px;line-height: 20px;color: #252e5d;text-align: left;padding-bottom: 0px;mso-margin-bottom-alt: 0px;">The duration is yours to choose,from 1-24 months</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 20px 0 10px 0; border-top: 0px solid #D2D7CA;" align="center">
<table class="w100p" width="400" style="width: 400px;margin: 0 auto;" align="center" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td style="width: 40px; vertical-align: top;" valign="top" align="left">
<img border="0" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/ae52a6e2-ca6a-4d8e-8944-532f952aae85/6e96bea4-bad3-11e9-843d-e26a1b8410ae/Icons/Check_blue_30px.png" width="26" alt="✓" style="display:block; padding: 0; margin: 0;font-size: 20px;font-weight: bold;font-family: arial,sans-serif;color: #DF4E3C;" />
</td>
<td style="vertical-align: top;" valign="top" align="left">
<p style="margin: 0;font-family: 'Arial';font-size: 16px;line-height: 20px;color: #252e5d;text-align: left;padding-bottom: 0px;mso-margin-bottom-alt: 10px;">You only pay one flat monthly payment which includes servicing,breakdown cover and optional insurance</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 20px 0 40px 0; border-top: 0px solid #D2D7CA;" align="center">
<table class="w100p" width="400" style="width: 400px;margin: 0 auto;" align="center" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="left" style="width: 40px; vertical-align: top;" valign="top" align="left">
<img border="0" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/ae52a6e2-ca6a-4d8e-8944-532f952aae85/6e96bea4-bad3-11e9-843d-e26a1b8410ae/Icons/Check_blue_30px.png" width="26" alt="✓" style="display:block; padding: 0; margin: 0;font-size: 20px;font-weight: bold;font-family: arial,sans-serif;color: #DF4E3C;" />
</td>
<td style="vertical-align: top;" valign="top" align="left">
<p style="margin: 0;font-family: 'Arial';font-size: 16px;line-height: 20px;color: #252e5d;text-align: left;padding-bottom: 0px;mso-margin-bottom-alt: 10px;">Safe home home delivery</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)