删除html表td之间的白线

问题描述 投票:0回答:2

我正在创建一个HTML电子邮件模板,并且终于(经过几个小时的挫折之后发现了更多关于HTML技术日期的拦截器)得到了我喜欢的设计。我已经删除了我实际使用的图像,因此对于粗略的照片道歉。但我正试图去除两个td之间的白细胞系。我已经删除了cell-paddingcell-spacing,认为它会对桌子产生全局影响。但我错了。我也在每个td上使用它,但仍然没有欢乐,任何帮助将不胜感激。

P.S,感谢Gmail,让标记看起来非常难看并且必须使用内联样式

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Nunito:300,400" rel="stylesheet">

  <style type="text/css">
  }
  @media only screen and (max-width: 400px) {
    table {
      width: 325px !important;
      margin: 0 auto;
    }
    
    #backgroundContent {
      height: 585px;
    }
    
    #buttonContainer {
      right: 1%;
    }
  }
  </style>
</head>

<body>

  <table cellspacing="0" cellpadding="0" style="width:400px !important; max-width:450px !important; margin: 0 auto;">
    <tbody>
      <tr>
        <td id="backgroundContent" colspan="2" cellspacing="0" cellpadding="0" style="text-align: center; width: 100%; height: 515px; background-image: url(https://i.ibb.co/vV22b3P/testesttest.png); background-size: cover; background-position: 40% 0%;">
          <div id="leftContent" style="width: 50%; height: inherit; float: left; position: relative;">
            <p style="position: absolute; width: 90%; padding: 280px 0 0 0; margin: 0 auto; z-index: 10; text-align: left; margin-left: 12%; color: #ffffff; font-family: Nunito; font-weight: 300; font-size: 14px;">
              cursus a congue at, pharetra vel justo. Maecenas eget elit id nulla lobortis vestibulum eget fermentum nisi. Sed et tortor nunc. Proin id ornare dui. In risus arcu, aliquam et vulputate placerat, tempor ut elit. In ac placerat velit. Aliquam turpis dui,
              lobortis ut consequat et, cursus vel
            </p>
          </div>
          <div id="rightContent" style="width: 50%; height: inherit; float: left; position: relative;">
            <div id="buttonContainer" style="display: flex; position: absolute; height: 30%; width: 85%; padding: 320px 0px 0 0;">
              <ul style="list-style: none; text-decoration: none; text-align: center;">
                <li style="background-color: transparent; width: 70%; padding: 15px; margin-bottom: 8%; border: 1px solid #ffffff; border-radius: 5px; text-transform: uppercase; font-family: Nunito; font-size: 12px; color: #ffffff;">
                  <a href="https://www.google.com" style="text-decoration: none; color: #ffffff; cursor: pointer;">Mauris sit</a>
                </li>
                <li style="background-color: transparent; width: 70%; padding: 15px; margin-bottom: 8%; border: 1px solid #ffffff; border-radius: 5px; text-transform: uppercase; font-family: Nunito; font-size: 12px; color: #ffffff;">
                  <a href="*|CENTRE_NUMBER|*" style="text-decoration: none; color: #ffffff; cursor: pointer;">Mauris sit amet</a>
                </li>
              </ul>
            </div>
          </div>
        </td>
      </tr>
      <tr cellspacing="0" cellpadding="0">
        <td cellspacing="0" cellpadding="0" style="background-color: #114496">
          <p style="float: right; text-align: right; margin-right: 25px; font-family: Nunito; font-size: 12px; color: #ffffff;">
            Mauris sit amet<br>Mauris sit amet
          </p>
        </td>
      </tr>
      <tr>
    </tbody>
  </table>

</body>

</html>
html css html-email
2个回答
1
投票

我能用一些CSS技巧摆脱白线。在底部td,我补充说:

margin-top: -1px;
display: inline-block;
width: 100%;

请参阅工作代码段:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Nunito:300,400" rel="stylesheet">

  <style type="text/css">
  }
  @media only screen and (max-width: 400px) {
    table {
      width: 325px !important;
      margin: 0 auto;
    }
    
    #backgroundContent {
      height: 585px;
    }
    
    #buttonContainer {
      right: 1%;
    }
  }
  </style>
</head>

<body>

  <table cellspacing="0" cellpadding="0" style="width:400px !important; max-width:450px !important; margin: 0 auto;">
    <tbody>
      <tr>
        <td id="backgroundContent" colspan="2" cellspacing="0" cellpadding="0" style="text-align: center; width: 100%; height: 515px; background-image: url(https://i.ibb.co/vV22b3P/testesttest.png); background-size: cover; background-position: 40% 0%;">
          <div id="leftContent" style="width: 50%; height: inherit; float: left; position: relative;">
            <p style="position: absolute; width: 90%; padding: 280px 0 0 0; margin: 0 auto; z-index: 10; text-align: left; margin-left: 12%; color: #ffffff; font-family: Nunito; font-weight: 300; font-size: 14px;">
              cursus a congue at, pharetra vel justo. Maecenas eget elit id nulla lobortis vestibulum eget fermentum nisi. Sed et tortor nunc. Proin id ornare dui. In risus arcu, aliquam et vulputate placerat, tempor ut elit. In ac placerat velit. Aliquam turpis dui,
              lobortis ut consequat et, cursus vel
            </p>
          </div>
          <div id="rightContent" style="width: 50%; height: inherit; float: left; position: relative;">
            <div id="buttonContainer" style="display: flex; position: absolute; height: 30%; width: 85%; padding: 320px 0px 0 0;">
              <ul style="list-style: none; text-decoration: none; text-align: center;">
                <li style="background-color: transparent; width: 70%; padding: 15px; margin-bottom: 8%; border: 1px solid #ffffff; border-radius: 5px; text-transform: uppercase; font-family: Nunito; font-size: 12px; color: #ffffff;">
                  <a href="https://www.google.com" style="text-decoration: none; color: #ffffff; cursor: pointer;">Mauris sit</a>
                </li>
                <li style="background-color: transparent; width: 70%; padding: 15px; margin-bottom: 8%; border: 1px solid #ffffff; border-radius: 5px; text-transform: uppercase; font-family: Nunito; font-size: 12px; color: #ffffff;">
                  <a href="*|CENTRE_NUMBER|*" style="text-decoration: none; color: #ffffff; cursor: pointer;">Mauris sit amet</a>
                </li>
              </ul>
            </div>
          </div>
        </td>
      </tr>
      <tr cellspacing="0" cellpadding="0">
        <td cellspacing="0" cellpadding="0" style="background-color: #114496;margin-top: -1px;display: inline-block;width: 100%;">
          <p style="float: right; text-align: right; margin-right: 25px; font-family: Nunito; font-size: 12px; color: #ffffff;">
            Mauris sit amet<br>Mauris sit amet
          </p>
        </td>
      </tr>
      <tr>
    </tbody>
  </table>

</body>

</html>

0
投票

我在Windows桌面计算机上的Outlook中查看的html电子邮件中遇到此问题。如果这是您的问题,您可以在结束前添加此代码段

<!--[if gte mso 12]><p style="font-size:12px;line-height:12px;>&nbsp;</p><![endif]-->

或者试试这个:将<td id="backgroundContent">上的背景图像属性更改为背景:#114496 url(https://i.ibb.co/vV22b3P/testesttest.png);

© www.soinside.com 2019 - 2024. All rights reserved.