Граница таблицы не отображается - даже с классом .table-border - PullRequest
0 голосов
/ 05 марта 2019

Итак, я создаю шаблон электронной почты, я включил в него таблицу, но, как видно из кода, когда он отображается, он не показывает границы таблицы.Я хочу иметь обычную однострочную границу таблицы.Я попытался добавить в "class =" table table-border ", но он все еще не показывает мне границу. Как я могу решить это? enter image description here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head> 
    <title>Mizona</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <style type="text/css">
      #logo img {
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
        width: auto;
        float: none !important;
        clear: both;
        display: block;
      }

      td {
        word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; font-family:'Verdana', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0; 
      }
      
      img {
        max-width: 100%;
      }

      .desktop-only {
        display: block;
      }

      .mobile-only {
        display: none;
      }

      .align-center {
        text-align: center; 
      }
      
      #cta1 a {
        text-decoration: none !important;
        color: #FFFFFF !important;
      }

      .no-spacing {
        padding:0px;
        margin: 0px;
      }

      #socialicons img {
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
        width: auto;
        float: none !important;
        clear: both;
        display: inline-block !important;
        border: none;
      }
      #graphic img {
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
        width: auto;
        max-width: 100%;
        float: none !important;
        clear: both;
        display: inline-block !important;
      }

      table[class="body"] .columns td.one {
        width: 8.333333% !important;
      }
      table[class="body"] .column td.one {
        width: 8.333333% !important;
      }
      table[class="body"] .columns td.two {
        width: 16.666666% !important;
      }
      table[class="body"] .column td.two {
        width: 16.666666% !important;
      }
      table[class="body"] .columns td.three {
        width: 25% !important;
      }
      table[class="body"] .column td.three {
        width: 25% !important;
      }
      table[class="body"] .columns td.four {
        width: 33.333333% !important;
      }
      table[class="body"] .column td.four {
        width: 33.333333% !important;
      }
      table[class="body"] .columns td.five {
        width: 41.666666% !important;
      }
      table[class="body"] .column td.five {
        width: 41.666666% !important;
      }
      table[class="body"] .columns td.six {
        width: 50%;
      }
      table[class="body"] .column td.six {
        width: 50%;
      }
      table[class="body"] .columns td.seven {
        width: 58.333333% !important;
      }
      table[class="body"] .column td.seven {
        width: 58.333333% !important;
      }
      table[class="body"] .columns td.eight {
        width: 66.666666% !important;
      }
      table[class="body"] .column td.eight {
        width: 66.666666% !important;
      }
      table[class="body"] .columns td.nine {
        width: 75% !important;
      }
      table[class="body"] .column td.nine {
        width: 75% !important;
      }
      table[class="body"] .columns td.ten {
        width: 83.333333% !important;
      }
      table[class="body"] .column td.ten {
        width: 83.333333% !important;
      }
      table[class="body"] .columns td.eleven {
        width: 91.666666% !important;
      }
      table[class="body"] .column td.eleven {
        width: 91.666666% !important;
      }
      table[class="body"] .columns td.twelve {
        width: 100% !important;
      }
      table[class="body"] .column td.twelve {
        width: 100% !important;
      }

      table[class="body"] .columns td {
        padding-top: 10px;
      }

      .pad-right-10 {
        padding-right: 10px;
      }

      .pad-top-10 {
        padding-top: 10px;
      }
      
      .mobile-center {
        text-align: left !important;
      }

      @media only screen and (max-width: 600px) {

        .pad-right-10 {
          padding-right: 0px;
        }

        .desktop-only {
          display: none !important;
        }

        .mobile-only {
          display: block;
        }
        
        .mobile-center {
        text-align: left !important;
        }

        .center-mobile {
          text-align: center;
        }

        #logo img {
          width: 100% !important;
        }

        #logo-mobile img {
          width: 80% !important;
        }
        #graphic img {
          width: 100% !important;
          height: auto !important;
        }
        *[class].center {
          text-align:center !important;
          margin:0 auto !important;
        }
        *[class].bottom-pad{ padding-bottom:35px !important;}
        table[class="body"] table.columns td {
          width: auto !important;
        }
        table[class="body"] table.column td .list {
          width: auto !important;
        }
        table[class="body"] img {
          width: auto !important;
          height: auto !important;
        }
        table[class="body"] center {
          min-width: 0 !important;
        }
        table[class="body"] .container {
          width: 100% !important;
        }
        table[class="body"] .row {
          width: 100% !important;
          display: block !important;
        }
        table[class="body"] .wrapper {
          display: block !important;
          padding-right: 0 !important;
        }
        table[class="body"] .columns {
          table-layout: fixed !important;
          float: none !important;
          width: 100% !important;
          padding-right: 0px !important;
          padding-left: 0px !important;
          display: block !important;
        }
        table[class="body"] .column {
          table-layout: fixed !important;
          float: none !important;
          width: 100% !important;
          padding-right: 0px !important;
          padding-left: 0px !important;
          display: block !important;
        }
        table[class="body"] .wrapper.first .columns {
          display: table !important;
        }
        table[class="body"] .wrapper.first .column {
          display: table !important;
        }
        table[class="body"] table.columns td {
          width: 100% !important;
        }
        table[class="body"] table.column td {
          width: 100% !important;
        }

        table[class="body"] .columns td {
          width: 100% !important;
          display: block;
        }
        table[class="body"] .column td {
          width: 100% !important;
          display: block;
        }

        table[class="body"] td.offset-by-one {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-two {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-three {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-four {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-five {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-six {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-seven {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-eight {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-nine {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-ten {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-eleven {
          padding-left: 0 !important;
        }
        table[class="body"] table.columns td.expander {
          width: 1px !important;
        }
        table[class="body"] .right-text-pad {
          padding-left: 10px !important;
        }
        table[class="body"] .text-pad-right {
          padding-left: 10px !important;
        }
        table[class="body"] .left-text-pad {
          padding-right: 10px !important;
        }
        table[class="body"] .text-pad-left {
          padding-right: 10px !important;
        }
        table[class="body"] .hide-for-small {
          display: none !important;
        }
        table[class="body"] .show-for-desktop {
          display: none !important;
        }
        table[class="body"] .show-for-small {
          display: inherit !important;
        }
        table[class="body"] .hide-for-desktop {
          display: inherit !important;
        }

        .social-icon td img {
          width: 40px !important;
          height: 40px !important;
        }
      }
    </style> 
  </head> 
  <body style="width:100% !important; min-width:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-align:left; margin:0; padding:0; background:#eeeeee; "> 
    <table class="body" style="border-spacing:0; border-collapse:collapse;  vertical-align:top; text-align:left; height:100%; width:100%; background:#eeeeee; margin:0; padding:0; " bgcolor="#EEEEEE"> 
      <tbody> 
        <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
          <td class="center" align="center" valign="top" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:center; font-weight:normal; margin:0; padding:0; "> 
            <center style="width:100%; min-width:600px; "> 
              <table class="container" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF"> 
                <tbody> 
                  <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
                    <td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; vertical-align:top; text-align:left; margin:0; padding:0;" align="left" valign="top"> 
                      <table class="row" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; display:block; padding:0px; "> 
                        <tbody> 
                          <tr style="vertical-align:top; text-align:left; padding:0;" align="left" bgcolor="#353937"> 
                            <td class="wrapper last center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; margin:0; padding:0px; " align="left" valign="top"> 
                              <table class="twelve columns center desktop-only" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:600px; padding:0; display:table !important; "> 
                                <tbody> 
                                  <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
                                    <td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; margin:0; padding:0px; " align="left" valign="top"> 
                                      <div class="mktEditable" id="logo" style="" mktoname="logo">
                                        <p class="no-spacing" style="margin: 30px;"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major-Infrastructure-Issue_Email-Template_Logo.png" alt="eO Logo.png" constrain="true" imagepreview="false" style="max-width: 600px;" /></p>
                                      </div></td> 
                                  </tr> 
                                </tbody> 
                              </table> </td> 
                          </tr> 
                        </tbody> 
                      </table> </td> 
                  </tr> 
                </tbody> 
              </table> 
              <table class="container mktoContainer" id="template-wrapper" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
                <tr class="mktoModule" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" id="content-intro-simple" mktoname="content-intro-simple"> 
                  <td style="padding: 20px 40px 10px 40px"> 
                    <div class="mktEditable" id="heading-simple" style="" mktoname="heading-simple">
                      <p><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Customer Action Required.png" /> <br /> <br /></p> 
                      <h4 style="color: #2ea049; font-size: 18px; line-height: 100%; margin: 0; padding: 0;">Upcoming Security Changes</h4> 
                      <div> 
                        <br /> 
                      </div> 
                      <p><b>Customer Name,</b></p>
                      <p>We are committed to ensuring the highest level of security standards for your most valuable digital assets. This email is requesting your partnership on some important security initiatives.</p>
                    </div> </td> 
                </tr>
                <tr class="mktoModule" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" id="content-intro-simpled47b52d3-01b4-4053-9a68-431c4cec6c29" mktoname="content-intro-simple-clone"> 
                  <td style="padding: 20px 40px; background-color:#EFF2F2"> 
                    <table  style="width:100%; background-color:white"> 
                      <tbody> 
                        <tr> 
                          <td align="center" width="20%"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Icons_What.png" /></td> 
                          <td style="width:70%; padding: 15px;">eOriginal is upgrading both our password acceptance criteria and the connection types our solution supports.</td> 
                        </tr> 
                        <tr> 
                          <td align="center" width="20%"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Icons_When.png" /></td> 
                          <td style="width:70%;padding: 15px;">Upgrades take effect <span style="color: orange"><strong>March 29th</strong></span> for Preview on Demand, <span style="color: orange"><strong>April 26th</strong></span> for Test on Demand, and <span style="color: orange"><strong>April 28th</strong></span> for Production on Demand.</td> 
                        </tr> 
                        <tr> 
                          <td align="center" width="20%"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Icons_Action Required_orange.png" /></td> 
                          <td style="width:70%; padding: 15px;"><span style="color: black"><strong>Ensure your Financial Assets are Safe with Enhanced Password Requirements</strong></span><br />We are requesting all customers ensure their passwords have a minimum length of 8 characters, 1 upper case letter, 1 lower case letter, 1 number, and 1 special character. This applies across both user and API-based sessions.<br /><br /><span style="color: black"><strong>Keep Sensitive Data Exchanged between eOriginal’s Platform, Users, and External Systems Private with Strong Encrypted Connections</strong></span><br />Please ensure that your access to eOriginal’s solution, whether through a browser or API, uses TLS 1.2 with a strong cipher suite (detailed in the attached document).</td> 
                        </tr> 
                        <tr> 
                          <td align="center" width="20%"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Icons_Why.png" /></td> 
                          <td style="width:70%;padding: 15px;">These actions provide greater protection from brute force attacks and keep the communication between eOriginal’s solution, your external systems, and user browser sessions secure.</td> 
                        </tr> 
                      </tbody> 
                    </table> </td> 
                </tr>

                <!-- <tr class="mktoModule" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" id="content-intro-simpled47b52d3-01b4-4053-9a68-431c4cec6c29" mktoname="content-intro-simple-clone"> 
                  <td style="padding: 20px 40px 20px 40px; background-color:#EFF2F2"> 
                    <div class="mktEditable" id="heading-simpled47b52d3-01b4-4053-9a68-431c4cec6c29" style="" mktoname="heading-simple">
                      <div> 
                        <br /> 
                      </div> 
                      <p style="color: #2ea049; font-size: 16px; line-height: 120%; margin: 0; padding: 0;"><strong>Ensure your Financial Assets are Safe with Enhanced Password Requirements</strong></p> 
                      <p>All customers will be required to comply with a minimum password policy of 8 characters, 1 upper case letter, 1 lower case letter, 1 number, and 1 special character. This will be required across user and API-based sessions.</p> 
                      <br /> 
                      <p style="color: #2ea049; font-size: 16px; line-height: 120%; margin: 0; padding: 0;"><strong>Keep Sensitive Data Exchanged between eOriginal’s Platform, Users, and External Systems Private with Strong Encrypted Connections</strong></p> 
                      <p>Any access to eOriginal’s solution, whether through a browser or API, will be required to use TLS 1.2 with a strong cypher suite (detailed in the attached document).</p>
                    </div> </td> 
                </tr> -->
                
                <tr class="mktoModule" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" id="content-intro-simpled47b52d3-01b4-4053-9a68-431c4cec6c29cfe45834-9b29-425f-b7e2-ee12f4678d5d" mktoname="content-intro-simple-clone-clone"> 
                  <td style="padding: 10px 40px 20px 40px"> 
                    <div class="mktEditable" id="heading-simpled47b52d3-01b4-4053-9a68-431c4cec6c29cfe45834-9b29-425f-b7e2-ee12f4678d5d" style="" mktoname="heading-simple">
                      <p>Full details on these and other upcoming requirements can be found in the attached document. Should you have any questions or concerns, please feel free to contact our support team and they will route you to the most appropriate resource.</p> 
                      <div>
                         We look forward to partnering with you on these important security initiatives. 
                      </div> 
                      <div></div> 
                      <p>Thank you,</p> 
                      <p><b>Val Daly</b> <br />VP, Customer Services<br /><a href="mailto:support@eoriginal.com" target="_top">support@eoriginal.com</a></p>
                    </div> </td> 
                </tr>
                <tr class="mktoModule" id="social" mktoname="social" bgcolor="#2EA049"> 
                  <td class="two-column" style="font-size: 0; text-align: center;"> 
                    <!--[if (gte mso 9)|(IE)]>
                      <table width="100%">
                      <tr>
                      <td width="50%" valign="top">
                      <![endif]--> 
                    <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                      <table width="100%"> 
                        <tbody> 
                          <tr> 
                            <td class="inner mobile-center" style="font-size: 12px; color: #FFFFFF; padding: 20px 40px;"> <a href="http://go.eoriginal.com/JB3eB005bE0cHk00O000000" target="_blank" style="text-decoration:none; color:#ffffff">eOriginal.com</a> </td> 
                          </tr> 
                        </tbody> 
                      </table> 
                    </div> 
                    <!--[if (gte mso 9)|(IE)]>
                        </td><td width="50%" valign="top">
                        <![endif]--> 
                    <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                      <table width="100%"> 
                        <tbody> 
                          <tr> 
                            <td class="inner" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> 
                              <table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%"> 
                                <tbody> 
                                  <tr> 
                                    <td align="left" valign="middle" width="50"><a href="https://twitter.com/eOriginal/" style="text-decoration:none;" target="_blank"><img alt="Twitter" src="https://eoriginal.wise-portal.com/newsletter/public/social-twitter-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></a></td> 
                                    <td align="left" valign="middle" width="50"><a href="https://www.linkedin.com/company/57606" style="text-decoration:none;" target="_blank"><img alt="LinkedIn" src="https://eoriginal.wise-portal.com/newsletter/public/social-linkedin-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></a></td> 
                                    <td align="left" valign="middle" width="50"><a href="http://www.facebook.com/pages/eOriginal/58932553996/" style="text-decoration:none;" target="_blank"><img alt="Facebook" src="https://eoriginal.wise-portal.com/newsletter/public/social-facebook-icon.png" style="color: #FFFFFF; font-size: 12px;" width="40" height="40" /></a></td> 
                                    <td align="left" valign="middle" width="50"><a href="https://www.eoriginal.com/eo-insights/" style="text-decoration:none;" target="_blank"><img alt="Blog" src="https://eoriginal.wise-portal.com/newsletter/public/social-blog-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></a></td> 
                                  </tr> 
                                </tbody> 
                              </table> </td> 
                          </tr> 
                        </tbody> 
                      </table> 
                    </div> 
                    <!--[if (gte mso 9)|(IE)]>
                      </td>
                      </tr>
                      </table>
                      <![endif]--> </td> 
                </tr>
                <tr class="mktoModule" id="footer" mktoname="footer" bgcolor="#353937"> 
                  <td class="two-column" style="font-size: 0; text-align: center;"> 
                    <!--[if (gte mso 9)|(IE)]>
                      <table width="100%">
                      <tr>
                      <td width="50%" valign="top">
                      <![endif]--> 
                    <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                      <table width="100%"> 
                        <tbody> 
                          <tr> 
                            <td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-footer-logo-v2.2.png" width="200" /><br /><br /> <span>© 2019 eOriginal, Inc. All rights reserved.</span> </td> 
                          </tr> 
                        </tbody> 
                      </table> 
                    </div> 
                    <!--[if (gte mso 9)|(IE)]>
                        </td><td width="50%" valign="top">
                        <![endif]--> 
                    <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                      <table width="100%"> 
                        <tbody> 
                          <tr> 
                            <td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> The Warehouse at Camden Yards<br /> 351 W. Camden St., Suite 800<br /> Baltimore, MD 21201<br /><br /> SALES <span style="color: #2EA049">1-866-935-1776</span><br />SUPPORT <span style="color: #2EA049">1-866-364-3578</span> </td> 
                          </tr> 
                        </tbody> 
                      </table> 
                    </div> 
                    <!--[if (gte mso 9)|(IE)]>
                      </td>
                      </tr>
                      </table>
                      <![endif]--> </td> 
                </tr>
              </table> 
            </center></td> 
        </tr> 
      </tbody> 
    </table>  
  </body>
</html>

1 Ответ

0 голосов
/ 05 марта 2019

Добавьте ниже стиль к вашему CSS

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid black;
}

Ниже приведен скриншот вывода, который я получаю из приведенного выше CSS.enter image description here

Для получения дополнительной информации о границе для таблицы HTML, перейдите по этой ссылке https://www.quackit.com/html/codes/tables/html_table_border.cfm

Ниже обновленный код

.table-bordered {
  border-collapse: collapse;
}

.“table-bordered” tr, .“table-bordered” td {
    border: 1px solid red;
    border-collapse: collapse;
}
...