Gmail Android版不接受宽度标签

问题描述

我在电子邮件中建立了一个表格,并且在Android版Gmail上遇到了奇怪的行为。勾选标记应该稍微填充一下,这就是为什么我在移动设备中将表格的宽度设置为90%。

它适用于所有电子邮件客户端,但不适用于Gmail,因为Gmail的表格内容一直达到100%。

请查看屏幕截图以及我的桌子的代码

感谢您的帮助!

Mobile screenshot

.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 (将#修改为@)