Удалить белую линию между html-таблицей td

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

В вашем фрагменте слишком много всего, чтобы увидеть, сократите его до необходимого. минимальный воспроизводимый пример

— 20.03.2019 19:07

Посмотреть новый фрагмент

— 20.03.2019 19:50

Примечание: у вас есть ошибочный } в начале вашего CSS.

— 20.03.2019 21:47

Попробуйте обрушение границ

— 20.03.2019 22:05

html css html-email

20.03.2019 18:56

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

2 146

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

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

20.03.2019 21:42

Ответ принят как подходящий

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

Это решение может быть проблематичным для клиентов Gmail. Отрицательные поля не всегда поддерживаются Gmail. Дополнительные сведения см. в этой статье — emailonacid.com/blog/article/email-development/….

— 21.03.2019 20:41

У меня та же проблема, но я решил, просто добавив border-collapse: Collapse; для столов

— 28.04.2021 20:18

20.03.2019 21:53