CODEWITHSUNDEEP
htmlcsshtml-email
dumbquestionsbydumbpeople
dumbquestionsbydumbpeople

Reputation: 317

Remove white line between html table td's

I'm creating an HTML email template and have finally (after hours of frustration finding more blockers of how dated HTML technology is) got a design I like. I've removed the images I'll actually use, so apologise for the gross photos. But I'm trying to remove the white cell line between two td's. I've removed cell-padding and cell-spacing, thinking that it would have a global effect on the table. But I am wrong. I've also used it on each td, but still no joy, any help will be appreciated.

P.S, thanks Gmail, for making the markup pretty ugly to look at and having to use inline style

<!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>

Upvotes: 0

Views: 3488

Answers (2)

mmshr
mmshr

Reputation: 947

I was able to get rid of the white line with some CSS trickery. On the bottom td, I added:

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

See working snippet:

<!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>

Upvotes: 1

Felix B
Felix B

Reputation: 157

I've had this problem in html emails viewed in Outlook on Windows desktop machines. If that is your problem, you can add this snippet before the closing

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

Or try this: change background-image property on your <td id="backgroundContent"> to simply background: #114496 url(https://i.ibb.co/vV22b3P/testesttest.png);

Upvotes: 0

Related Questions