Как добавить границу в HTML-шаблон почты?

Я создал шаблон электронной почты в редакторе шаблонов электронной почты. Каждый почтовый элемент состоит из вложенных табличных тегов. Я создал таблицу, содержащую все эти элементы, и попытался обрамить теги ,, но между верхним и нижним элементами и границей есть пробел.

Вот мой HTML-код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns:o = "urn:schemas-microsoft-com:office:office" style = "font-family:ProximaNova,sans-serif">
 <head>
  <meta charset = "UTF-8">
  <meta content = "width=device-width, initial-scale=1" name = "viewport">
  <meta name = "x-apple-disable-message-reformatting">
  <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
  <meta content = "telephone=no" name = "format-detection">
  <title>İş Bankası Emeklileri Derneği</title>
  <style type = "text/css">
#outlook a {
    padding:0;
}
.es-button {
    mso-style-priority:100!important;
    text-decoration:none!important;
}
a[x-apple-data-detectors] {
    color:inherit!important;
    text-decoration:none!important;
    font-size:inherit!important;
    font-family:ProximaNova,sans-serif !important;
    font-weight:inherit!important;
    line-height:inherit!important;
}
.es-desk-hidden {
    display:none;
    float:left;
    overflow:hidden;
    width:0;
    max-height:0;
    line-height:0;
    mso-hide:all;
}
[data-ogsb] .es-button {
    border-width:0!important;
    padding:10px 20px 10px 20px!important;
}
.es-button-border:hover a.es-button, .es-button-border:hover button.es-button {
    background:#56d66b!important;
    border-color:#56d66b!important;
}
.es-button-border:hover {
    border-color:#42d159 #42d159 #42d159 #42d159!important;
    background:#56d66b!important;
}
@media only screen and (max-width:600px) {p, ul li, ol li, a { line-height:150%!important } h1, h2, h3, h1 a, h2 a, h3 a { line-height:120% } h1 { font-size:30px!important; text-align:left } h2 { font-size:24px!important; text-align:left } h3 { font-size:20px!important; text-align:left } .es-header-body h1 a, .es-content-body h1 a, .es-footer-body h1 a { font-size:30px!important; text-align:left } .es-header-body h2 a, .es-content-body h2 a, .es-footer-body h2 a { font-size:24px!important; text-align:left } .es-header-body h3 a, .es-content-body h3 a, .es-footer-body h3 a { font-size:20px!important; text-align:left } .es-menu td a { font-size:14px!important } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size:14px!important } .es-content-body p, .es-content-body ul li, .es-content-body ol li, .es-content-body a { font-size:14px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:14px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:12px!important } *[class = "gmail-fix"] { display:none!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-button-border { display:inline-block!important } a.es-button, button.es-button { font-size:18px!important; display:inline-block!important } .es-adaptive table, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } .es-mobile-hidden, .es-hidden { display:none!important } tr.es-desk-hidden, td.es-desk-hidden, table.es-desk-hidden { width:auto!important; overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } tr.es-desk-hidden { display:table-row!important } table.es-desk-hidden { display:table!important } td.es-desk-menu-hidden { display:table-cell!important } .es-menu td { width:1%!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } .es-desk-hidden { display:table-row!important; width:auto!important; overflow:visible!important; max-height:inherit!important } }
</style>
 </head>
 <body style = "width:100%;font-family:ProximaNova,sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0">
  <div class = "es-wrapper-color" style = "background-color:#FFFFFF">

   <table class = "es-wrapper test" cellspacing = "0" cellpadding = "0" style = "mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;background-color:#FFFFFF">
     <tr>
      <td valign = "top" style = "padding:0;Margin:0">

        <table cellspacing = "0" cellpadding = "0" align = "center" style = "mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px;padding: 0;">
          <tr>
            <td align = "center" style = "padding:0;Margin:0;border: 2px solid #2D588C; border-collapse: collapse;">
              
              <table class = "es-header" cellspacing = "0" cellpadding = "0" align = "center" style = "mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px;">
                <tr>
                <td align = "center" style = "padding:0;Margin:0;height: 24px;background-color: #2D588C;width: 100%;line-height: 0;">
                 
                </td>
                </tr>
              </table>

              <table class = "es-content" cellspacing = "0" cellpadding = "0" align = "center" style = "mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:600px">
                <tr>
                <td align = "center" style = "padding:0;Margin:0">
                  <table class = "es-content-body" cellspacing = "0" cellpadding = "0" bgcolor = "#ffffff" align = "center" style = "mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px;">
                    <tr>
                    <td align = "left" style = "padding:0;Margin:0;">
                      <table width = "100%" cellspacing = "0" cellpadding = "0" style = "mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
                        <tr>
                        <td valign = "top" align = "center" style = "padding:0;Margin:0;width:560px">
                          <table width = "100%" cellspacing = "0" cellpadding = "0" role = "presentation" style = "mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
                            <tr>
                            <td align = "left" style = "padding:0px;Margin:0"><p style = "Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:ProximaNova,sans-serif;line-height:21px;color:#2D588C;font-size:14px;background-color: #2D588C;;">navbar</p></td>
                            </tr>
                          </table></td>
                        </tr>
                      </table></td>
                    </tr>
                  </table></td>
                </tr>
              </table>

              

              <table class = "es-footer" cellspacing = "0" cellpadding = "0" align = "center" style = "mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:600px;background-color:transparent;background-repeat:repeat;background-position:center top">
                <tr>
                <td align = "center" style = "padding:0;Margin:0">
                  <table class = "es-footer-body" cellspacing = "0" cellpadding = "0" bgcolor = "#ffffff" align = "center" style = "mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px;">
                    <tr>
                    <td align = "left" style = "Margin:0;padding-top:0px;padding-bottom:8px;padding-left:24px;padding-right:24px"><!--[if mso]><table style = "width:560px" cellpadding = "0" cellspacing = "0"><tr><td style = "width:273px" valign = "top"><![endif]-->
                      <table class = "es-left" cellspacing = "0" cellpadding = "0" align = "left" style = "mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left">
                        <tr>
                        <td align = "left" style = "padding:0;Margin:0;width:273px">
                          <table width = "100%" cellspacing = "0" cellpadding = "0" role = "presentation" style = "mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
                            <tr>
                            <td align = "center" style = "padding:15px;Margin:0;font-size:0px"><a target = "_blank" href = "https://www.isemder.org.tr/" style = "-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;text-decoration:underline;color:#FFFFFF;font-size:14px"><img class = "adapt-img" src = "https://ayvgzb.stripocdn.email/content/guids/CABINET_eb08dc9df3ba5c6c1bf9ff1e3de79aa49c1c34faf361fe8f44c704417369282b/images/logo.png" alt style = "display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" height = "77"></a></td>
                            </tr>
                          </table></td>
                        </tr>
                      </table><!--[if mso]></td><td style = "width:15px"></td><td style = "width:272px" valign = "top"><![endif]-->
                      <table class = "es-right" cellspacing = "0" cellpadding = "0" align = "right" style = "mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right">
                        <tr>
                        <td align = "left" style = "padding:0;Margin:0;width:272px">
                          <table width = "100%" cellspacing = "0" cellpadding = "0" role = "presentation" style = "mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
                            <tr>
                            <td align = "left" style = "padding:0;Margin:0;font-family:ProximaNova,sans-serif;">
                              <p style = "font-size: 14px; line-height: 140%; text-align: justify;margin-top: 0px;margin-bottom: 5px;"><span style = "font-size: 16px; line-height: 22.4px; color: #2D588C;"><strong>Some text</strong></span></p>
                             </td>      
                            </tr>
                          </table></td>
                        </tr>
                      </table><!--[if mso]></td></tr></table><![endif]--></td>
                    </tr>
                  </table></td>
                </tr>
              </table>

              <table class = "es-header" cellspacing = "0" cellpadding = "0" align = "center" style = "mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px;">
                <tr>
                <td align = "center" style = "padding:0;Margin:0;height: 24px;background-color: #2D588C;width: 100%;line-height: 0;">
                 
                </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      
      </td>
     </tr>
   </table>
  </div>
 </body>
</html>

как удалить границу и пробел между первым и последним элементом электронной почты?

html css html-table html-email email-templates

20.01.2023 07:26

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

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

Ответы 3

Не уверен, что вы ищете это. Но если вы можете объяснить, какие элементы вы имеете в виду и где именно вы хотите, чтобы появились границы, я мог бы помочь.

body {
  width: 100%;
  display: flex;
  justify-content: center;
}
div {
  border: 2px solid red;
}
table {
  background-color: #2D588C;
  text-align: center;
}
thead tr td {
  color: white;
  font-size: 20px;
  font-weight: 600;
}
tbody {
  width: inherit;
  float: left;
  background-color: white;
  padding: 4px;
}
td {
  font-weight = "bold";
  border: 2px solid black;
}

<body>
  <div>
      <table>
        <thead>
          <tr>
            <td colspan = "2">header</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><a href = "https://ayvgzb.stripocdn.email/content/guids/CABINET_eb08dc9df3ba5c6c1bf9ff1e3de79aa49c1c34faf361fe8f44c704417369282b/images/logo.png"><img src = "https://ayvgzb.stripocdn.email/content/guids/CABINET_eb08dc9df3ba5c6c1bf9ff1e3de79aa49c1c34faf361fe8f44c704417369282b/images/logo.png"></a></td>
            <td id = "nested">
              <table id"table2">
                <thead>
                  <tr>
                    <td colspan = "2">Another header</td>
                  </tr>
                </thead>
                <tr>
                  <td>Some Text</td>
                  <td>Some more text</td>
                </tr>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
</body>

20.01.2023 09:00

Добро пожаловать stack overflow :)

Это одна из удивительных проблем языка CSS, и вы можете исправить ее, добавив этот стиль к своему элементу table:

table {
    border-collapse: collapse;
}

Кроме того, вы можете использовать структуру flexbox для веб-дизайна вместо tables. это более стандартно и лучше.

Полное руководство по flexbox можно найти в W3Schools

Удачи

flexbox не имеет хорошей поддержки в почтовых клиентах.

— 21.01.2023 04:23

Я не знал. но вы можете попробовать table { border-collapse: collapse; } как я сказал в ответ. Вы не нашли это полезным?

— 29.01.2023 18:53

border-collapse помогает свернуть границу, чтобы таблицы работали правильно? Не думайте, что это ответ, который помогает to add border to HTML mail template?

— 30.01.2023 01:44

Вы сказали «между верхним и нижним элементами есть пробел», и я подумал, что вы имеете в виду, что хотите удалить это пространство :)

— 30.01.2023 20:59

Я не ОП?

— 31.01.2023 04:02

20.01.2023 09:10

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

Простой, но эффективный код. Вы можете добавить рамку вокруг td и поместить в нее свое электронное письмо. Этот код работает во всех почтовых клиентах одинаково.

<table width = "100%" border = "0" cellspacing = "0" cellpadding = "0">
    <tbody>
        <tr>
            <td style = "border:1px solid #000000">
            
                <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0">
                    <tbody>
                        <tr>
                            <td style = "padding:10px;">Emailgoes here</td>
                        </tr>
                    </tbody>
                </table>
                
            </td>
        </tr>
    </tbody>
</table>

27.01.2023 05:05

Другие вопросы по теме

Регулярное выражение, чтобы получить все селекторы, которые имеют шестнадцатеричный код цвета в своем блоке, но выбирают только один, а не весь цвет

Как расширить список массива объектов с помощью цикла for

Как удалить строку из динамической таблицы JavaScript?

Как установить высоту текстовой области с помощью минимальной высоты?

Как изменить непрозрачность других элементов при наведении курсора на div | CSS

Вычислить высоту элемента с помощью прослушивателя JS

Bootstrap 5: слайдер/карусель продуктов

Ширина макета Div не расширяется полностью

Два класса CSS не подбирают оба класса

Как динамически форматировать классы попутного ветра для повторного использования стилей?

Как добавить границу в HTML-шаблон почты?

Ответы 3

Другие вопросы по теме

Похожие вопросы