代码之家  ›  专栏  ›  技术社区  ›  spz1

iOS呈现电子邮件大小的一半

  •  1
  • spz1  · 技术社区  · 7 年前

    问题

    我在Litmus中测试了我的电子邮件,它仅在iOS手机中呈现为电子邮件窗口大小的一半,如图所示 here . 这听起来像是苹果在iOS 10中进行的更新,这样用户就可以放大他们的电子邮件。 我需要帮助在iOS手机上获得全宽响应电子邮件渲染。

    故障排除

    当我删除所有css样式时,它会在手机上正确呈现(全宽)。但我需要回复邮件。

    不适合我的在线解决方案

    1. 我在网上看到过这个问题,比如 here 在这里 解决方案非常简单,只需在 <meta name="x-apple-disable-message-reformatting" /> .
    2. <meta name="viewport" content="width=device-width, initial-scale=1.0" shrink-to-fit="no">
    3. 正文{宽度:100%;最大宽度:600px;}
    4. <body style="width: 100%; max-width: 600px;>
    5. 将表格宽度设置为100%,最大宽度:600px;

    这是我的密码

    <!doctype html>
    <html>
      <head> 
        <meta charset="UTF-8"> 
        <meta name="x-apple-disable-message-reformatting">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" shrink-to-fit="no"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    
        <meta class="mktoColor" id="headlineColor" mktoname="Headline Color" default="#003a70"> 
        <meta class="mktoColor" id="textColor" mktoname="Main Text Color" default="#333333"> 
        <meta class="mktoColor" id="mkto-callout-text-bg-color" mktoname="Callout BG Color" default="#00843d"> 
        <meta class="mktoColor" id="mkto-callout-text-color" mktoname="Callout Text Color" default="#ffffff"> 
        <meta class="mktoColor" id="mkto-cta-text-link" mktoname="CTA Text Link Color" default="#00843d"> 
        <meta class="mktoColor" id="mkto-cta-button-bg-color" mktoname="CTA BTN Bg Color" default="#003a70"> 
        <meta class="mktoColor" id="mkto-footer-link-color" mktoname="Footer Link Color" default="#418fde"> 
        <title>Test</title> 
    
        <style type="text/css">
    
      html, body {
          margin: 0 !important;
          padding: 0 !important;
          height: 100% !important;
          min-width: 100% !important;
          -webkit-text-size-adjust:none !important;
      }
      * {
          -ms-text-size-adjust: 100%;
          -webkit-text-size-adjust: 100%;
      }
      .ExternalClass {
          width: 100%;
      }
      div[style*="margin: 16px 0"] {
          margin: 0 !important;
      }
      table, td {
          mso-table-lspace: 0pt !important;
          mso-table-rspace: 0pt !important;
      }
      table {
          border-spacing: 0 !important;
          border-collapse: collapse !important;
          table-layout: fixed !important;
          margin: 0 auto !important;
      }
      table table table {
          table-layout: auto;
      }
      img {
          -ms-interpolation-mode: bicubic;
      }
      .yshortcuts a {
          border-bottom: none !important;
      }
      a[x-apple-data-detectors] {
          color: inherit !important;
      }
      </style> 
        <style type="text/css">
      .button-td, .button-a {
          transition: all 100ms ease-in;
      }
    
      /* Media Queries */
      @media screen and (max-width: 600px) {
        .email-container {
            width: 100% !important;
        }
        .fluid, .fluid-centered {
            max-width: 100% !important;
            height: auto !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        .fluid-centered {
            margin-left: auto !important;
            margin-right: auto !important;
        }
        .stack-column, .stack-column-center {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            direction: ltr !important;
        }
        .stack-column-center {
            text-align: center !important;
        }
        .center-on-narrow {
            text-align: center !important;
            display: block !important;
            margin-left: auto !important;
            margin-right: auto !important;
            float: none !important;
        }
        table.center-on-narrow {
            display: inline-block !important;
        }
      }
      </style> 
      </head> 
      <body bgcolor="#f2f2f2" width="100%" style="margin: 0; min-width: 100%; -webkit-text-size-adjust:none;" yahoo="yahoo"> 
        <table bgcolor="#f2f2f2" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;"> 
          <tbody> 
            <tr> 
              <td> 
                <center style="width: 100%;"> 
                  <table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container mktoContainer" id="mkto-container" style="width: 600px;">
                    <tr class="mktoModule" id="logo-container" mktoname="Header logo"> 
                      <td style="padding: 20px 0; text-align: center"> 
                        <div class="mktoImg" id="header-logo-image" mktoname="Header Logo Image" mktolockimgsize="true">
                          <a href=""><img src="" width="250" height="50" style=""></a>
                        </div> </td> 
                    </tr>
                    <tr class="mktoModule" id="body-copy-section" mktoname="Body copy with headline"> 
                      <td style="padding-left: 40px; padding-right: 40px; padding-top: 0px; padding-bottom: 0px;"> 
                        <div class="mktoText" id="headlineText" mktoname="Headline">
                          <p style="text-align: center; font-family: 'Arial', Helvetica, sans-serif; font-size: 24px; mso-height-rule: exactly; line-height: 32px; color: ${headlineColor};"> Lorem ipsum dolor sit amet, consectetur adipiscing&nbsp;elit </p>
                        </div> 
                        <div class="mktoText" id="Paragraph1text" mktoname="Paragraph Text">
                          <p style="text-align: left; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor};"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. <a href="" style="color: ${mkto-cta-text-link};" target="_blank"><u>This is a&nbsp;link, it is underlined and the hex code is #eb6b19.</u></a> </p>
                        </div> </td> 
                    </tr>
                    <tr class="mktoModule" id="hero-container" mktoname="Hero Image"> 
                      <td class="full-width-image"> 
                        <div class="mktoImg" id="hero-banner-image" mktoname="Hero Banner Image" mktolockimgsize="true">
                          <a href=""><img src="" width="600" alt="alt_text" style="width: 100%; max-width: 600px; height: auto;"></a>
                        </div> </td> 
                    </tr>
                    <tr class="mktoModule" id="centered-btn" mktoname="CTA Button"> 
                      <td> 
                        <table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto"> 
                          <tbody> 
                            <tr> 
                              <td style="border-radius: 3px; background: ${mkto-cta-button-bg-color}; text-align: center;" class="button-td">
                                <a href="" style="background: ${mkto-cta-button-bg-color}; border: 15px solid ${mkto-cta-button-bg-color}; padding: 0 10px;color: #ffffff; font-family: 'Arial', Helvetica, sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a" id="mkto-button" mktoName="Button"> 
                                CTA BUTTON 1
                                </a>
                              </td>
                            </tr> 
                          </tbody> 
                        </table> </td> 
                    </tr>
                    <tr class="mktoModule" id="video-screenshot" mktoname="video screenshot"> 
                      <td class="full-width-image"> 
                        <div class="mktoImg" id="full-width-image" mktoname="Full Width Image" mktolockimgsize="true">
                          <a href=""><img src="" width="600" alt="Image" style="width: 100%; max-width: 600px; height: auto;"></a>
                        </div> </td> 
                    </tr>
                    <tr class="mktoModule" id="bullet-group" mktoname="Bulleted List"> 
                      <td style="padding-right: 40px; padding-left: 40px; padding-top: 0px; padding-bottom: 0px;"> 
                        <div class="mktoText" id="Paragraph2text" mktoname="Paragraph Text">
                          <p style="text-align: left; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor};">Maecenas sed ante pellentesque:</p>
                        </div> 
                        <div class="mktoText" id="bulletedList" mktoname="Bulleted List">
                          <ul> 
                            <li style="margin-bottom: 10px; margin text-overflow: ellipsis; word-wrap: break-word; color: ${textColor}; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li> 
                            <li style="margin-bottom: 10px; text-overflow: ellipsis; word-wrap: break-word; color: ${textColor}; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
                            <li style="margin-bottom: 10px; text-overflow: ellipsis; word-wrap: break-word; color: ${textColor}; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> 
                          </ul>
                        </div> </td> 
                    </tr>
                    <tr class="mktoModule" id="signature" mktoname="Signature"> 
                      <td style="padding-right: 40px; padding-left: 40px; padding-top: 0px; padding-bottom: 0px;"> 
                        <div class="mktoText" id="Paragraph3text" mktoname="Paragraph Text">
                          <p style="text-align: left; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor};"> Regards, <br> <br> <strong><span style="color: #003a70">Our Team</span></strong><br></p>
                        </div> </td> 
                    </tr>
                    <tr class="mktoModule" id="three-col-img-text" mktoname="Three columns with image and text"> 
                      <td align="center" valign="top" style="padding: 10px;"> 
                        <table cellspacing="0" cellpadding="0" border="0" width="100%"> 
                          <tbody> 
                            <tr> 
                              <td width="33.33%" class="stack-column-center"> 
                                <table cellspacing="0" cellpadding="0" border="0"> 
                                  <tbody> 
                                    <tr> 
                                      <td style="padding: 10px; text-align: center"> 
                                        <div class="mktoImg" id="lower-left-image" mktoname="Lower Left Image" mktolockimgsize="true">
                                          <a href=""><img src="" width="170" height="170" alt="alt_text" class="fluid"></a>
                                        </div> </td> 
                                    </tr> 
                                    <tr> 
                                      <td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> 
                                        <div class="mktoText" id="lowerLeftImageText" mktoname="Lower Left Image Text">
                                          Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                                        </div> </td> 
                                    </tr> 
                                  </tbody> 
                                </table> </td> 
                              <td width="33.33%" class="stack-column-center"> 
                                <table cellspacing="0" cellpadding="0" border="0"> 
                                  <tbody> 
                                    <tr> 
                                      <td style="padding: 10px; text-align: center"> 
                                        <div class="mktoImg" id="lower-middle-image" mktoname="Lower Middle Image" mktolockimgsize="true">
                                          <a href=""><img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-170x170.png" width="170" height="170" alt="alt_text" class="fluid"></a>
                                        </div> </td> 
                                    </tr> 
                                    <tr> 
                                      <td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> 
                                        <div class="mktoText" id="lowerMiddleImageText" mktoname="Lower Middle Image Text">
                                          Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                                        </div> </td> 
                                    </tr> 
                                  </tbody> 
                                </table> </td> 
                              <td width="33.33%" class="stack-column-center"> 
                                <table cellspacing="0" cellpadding="0" border="0"> 
                                  <tbody> 
                                    <tr> 
                                      <td style="padding: 10px; text-align: center"> 
                                        <div class="mktoImg" id="lower-right-image" mktoname="Lower Right Image" mktolockimgsize="true">
                                          <a href=""><img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-170x170.png" width="170" height="170" alt="alt_text" class="fluid"></a>
                                        </div> </td> 
                                    </tr> 
                                    <tr> 
                                      <td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> 
                                        <div class="mktoText" id="lowerRightImageText" mktoname="Lower Right Image Text">
                                          Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                                        </div> </td> 
                                    </tr> 
                                  </tbody> 
                                </table> </td> 
                            </tr> 
                          </tbody> 
                        </table> </td> 
                    </tr>
                    <tr class="mktoModule" id="callout-box" mktoname="Callout Box"> 
                      <td bgcolor="${mkto-callout-text-bg-color}" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;"> 
                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> 
                          <tbody> 
                            <tr> 
                              <td valign="middle" style="text-align: center; padding: 40px;"> 
                                <div class="mktoText" id="calloutText" mktoname="Callout Box Text">
                                  <p style="text-align: center; font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${mkto-callout-text-color};;"> <strong>Call out box:</strong> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut&nbsp;erat. </p>
                                </div> </td> 
                            </tr> 
                          </tbody> 
                        </table> 
                        </td> 
                    </tr>
                    <tr class="mktoModule" id="two-col-img-text" mktoname="Two columns with image and text"> 
                      <td align="center" valign="top" style="padding: 10px;"> 
                        <table cellspacing="0" cellpadding="0" border="0" width="100%"> 
                          <tbody> 
                            <tr> 
                              <td class="stack-column-center"> 
                                <table cellspacing="0" cellpadding="0" border="0"> 
                                  <tbody> 
                                    <tr> 
                                      <td style="padding: 10px; text-align: center"> 
                                        <div class="mktoImg" id="top-left-image" mktoname="Top Left Image" mktolockimgsize="true">
                                          <a href=""><img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-270x270.png" width="270" height="270" alt="alt_text" class="fluid"></a>
                                        </div> </td> 
                                    </tr> 
                                    <tr> 
                                      <td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> 
                                        <div class="mktoText" id="topLeftImageText" mktoname="Top Left Image Text">
                                          <p>Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                                        </div> </td> 
                                    </tr> 
                                  </tbody> 
                                </table> </td> 
                              <td class="stack-column-center"> 
                                <table cellspacing="0" cellpadding="0" border="0"> 
                                  <tbody> 
                                    <tr> 
                                      <td style="padding: 10px; text-align: center"> 
                                        <div class="mktoImg" id="top-right-image" mktoname="Top Right Image" mktolockimgsize="true">
                                          <a href=""><img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-270x270.png" width="270" height="270" alt="alt_text" class="fluid"></a>
                                        </div> </td> 
                                    </tr> 
                                    <tr> 
                                      <td style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> 
                                        <div class="mktoText" id="topRightImageText" mktoname="Top Right Image Text">
                                          <p>Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                                        </div> </td> 
                                    </tr> 
                                  </tbody> 
                                </table> </td> 
                            </tr> 
                          </tbody> 
                        </table> </td> 
                    </tr>
                    <tr class="mktoModule" id="left-img-right-copy" mktoname="Left image, right copy"> 
                      <td dir="ltr" align="center" valign="top" width="100%" style="padding: 10px;"> 
                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> 
                          <tbody> 
                            <tr> 
                              <td width="33.33%" class="stack-column-center"> 
                                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> 
                                  <tbody> 
                                    <tr> 
                                      <td dir="ltr" valign="top" style="padding: 0 10px;"> 
                                        <div class="mktoImg" id="bottom-left-image" mktoname="Bottom Left Image" mktolockimgsize="true">
                                          <a href=""><img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-170x170.png" width="170" alt="alt_text" class="center-on-narrow"></a>
                                        </div> </td> 
                                    </tr> 
                                  </tbody> 
                                </table> </td> 
                              <td width="66.66%" class="stack-column-center"> 
                                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> 
                                  <tbody> 
                                    <tr> 
                                      <td dir="ltr" valign="top" style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 10px; text-align: left;" class="center-on-narrow"> 
                                        <div class="mktoText" id="bottomImageText1" mktoname="Bottom Image Text 1">
                                          <strong style="color:${textColor};">Class aptent taciti sociosqu</strong> 
                                          <br> 
                                          <br> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
                                          <br> 
                                          <br> 
                                          <table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;"> 
                                            <tbody> 
                                              <tr> 
                                                <td style="border-radius: 3px; background: ${mkto-cta-button-bg-color}; text-align: center;" class="button-td"><a href="" style="background: ${mkto-cta-button-bg-color}; border: 15px solid ${mkto-cta-button-bg-color}; padding: 0 10px;color: #ffffff; font-family: 'Arial', Helvetica, sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a"> 
                                                    CTA BUTTON 2 
                                                    </a> </td> 
                                              </tr> 
                                            </tbody> 
                                          </table>
                                        </div> 
                                        </td> 
                                    </tr> 
                                  </tbody> 
                                </table> </td> 
                            </tr> 
                          </tbody> 
                        </table> </td> 
                    </tr>
                    <tr class="mktoModule" id="right-img-left-copy" mktoname="Right image, left copy"> 
                      <td dir="rtl" align="center" valign="top" width="100%" style="padding: 10px;"> 
                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> 
                          <tbody> 
                            <tr> 
                              <td width="33.33%" class="stack-column-center"> 
                                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> 
                                  <tbody> 
                                    <tr> 
                                      <td dir="ltr" valign="top" style="padding: 0 10px;"> 
                                        <div class="mktoImg" id="bottom-right-image" mktoname="Bottom Right Image" mktolockimgsize="true">
                                          <a href=""><img src="http://na-ab25.marketo.com/rs/433-TWV-220/images/Image-Placeholder-170x170.png" width="170" alt="alt_text" class="center-on-narrow"></a>
                                        </div> </td> 
                                    </tr> 
                                  </tbody> 
                                </table> </td> 
                              <td width="66.66%" class="stack-column-center"> 
                                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> 
                                  <tbody> 
                                    <tr> 
                                      <td dir="ltr" valign="top" style="font-family: 'Arial', Helvetica, sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 24px; color: ${textColor}; padding: 10px; text-align: left;" class="center-on-narrow"> 
                                        <div class="mktoText" id="bottomImageText2" mktoname="Bottom Image Text 2">
                                          <strong style="color:${textColor};">Class aptent taciti sociosqu</strong> 
                                          <br> 
                                          <br> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
                                          <br> 
                                          <br> 
                                          <table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;"> 
                                            <tbody> 
                                              <tr> 
                                                <td style="border-radius: 3px; background: ${mkto-cta-button-bg-color}; text-align: center;" class="button-td"> <a href="" style="background: ${mkto-cta-button-bg-color}; border: 15px solid ${mkto-cta-button-bg-color}; padding: 0 10px;color: #ffffff; font-family: 'Arial', Helvetica, sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a"> CTA BUTTON 3</a> </td> 
                                              </tr> 
                                            </tbody> 
                                          </table> 
                                        </div> </td> 
                                    </tr> 
                                  </tbody> 
                                </table> </td> 
                            </tr> 
                          </tbody> 
                        </table> </td> 
                    </tr>
                    <tr class="mktoModule" id="thick-divider" mktoname="CC, Phone and Web link"> 
                      <td class="full-width-image"> 
                        <div class="mktoImg" id="footer-image" mktoname="Footer Image" mktolockimgsize="true">
                          <a href=""><img src="" width="600" alt="" style="width: 100%; max-width: 600px; height: auto;"></a>
                        </div> </td> 
                    </tr>
                  </table> 
                </center> </td> 
            </tr> 
          </tbody> 
        </table>  
      </body>
    </html>
    
    1 回复  |  直到 7 年前
        1
  •  2
  •   Syfer Paul Morgan    7 年前

    正如我在聊天中发现的那样,问题是由表修复CSS引起的。一旦你把它移走,桌子就开始全宽了。

    之前:

    table { 
                border-spacing: 0 !important; 
                border-collapse: collapse !important; 
                table-layout: fixed !important; 
                margin: 0 auto !important; 
              }
    

    之后:

    table { 
                border-spacing: 0 !important; 
                border-collapse: collapse !important; 
                margin: 0 auto !important; 
              }
    

    干杯