Удалить белую линию между таблицами HTML - PullRequest
Новая
       26

Удалить белую линию между таблицами HTML

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

Я создаю шаблон электронной почты в формате HTML и, наконец, (после нескольких часов разочарования, обнаружив больше блокировщиков устаревших технологий HTML), я получил дизайн, который мне нравится.Я удалил изображения, которые буду использовать, поэтому извиняюсь за грубые фотографии.Но я пытаюсь убрать белую клеточную линию между двумя td.Я удалил cell-padding и 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>

Ответы [ 2 ]

1 голос
/ 20 марта 2019

Мне удалось избавиться от белой линии с помощью некоторых хитростей 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 голосов
/ 20 марта 2019

У меня была эта проблема в html-письмах, просматриваемых в Outlook на компьютерах с Windows.Если это ваша проблема, вы можете добавить этот фрагмент перед закрывающим

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

или попробуйте это: измените свойство background-image на вашем <td id="backgroundContent"> на простой фон: # 114496 url(https://i.ibb.co/vV22b3P/testesttest.png);

...