时间戳

首页 > 解决方案 > 删除 html 表 td 之间的白线

html - 删除 html 表 td 之间的白线

问题描述

我正在创建一个 HTML 电子邮件模板，最终（经过数小时的挫折，发现更多阻碍 HTML 技术过时的因素）得到了我喜欢的设计。我已经删除了我将实际使用的图像，因此对这些照片表示歉意。但我试图去除两个之间的白细胞系td。我删除了cell-paddingand cell-spacing，认为它会对桌子产生全局影响。但我错了。我也在每一个上都使用过它td，但仍然没有快乐，任何帮助将不胜感激。

PS，感谢 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>

标签： htmlcsshtml-email

解决方案

我能够用一些 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>

推荐阅读