Отправить HTML-границу по содержанию, а не по ячейке?

Question

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td style="border:2px solid #ffffff; padding: 8px 10px;  border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;  text-decoration:none;">
    <h3 style="color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:150%;letter-spacing:2px;text-decoration:none;text-align:center;">
      <a alias="" conversion="false" data-linkto="https://" href="google.com" style="color:#ffffff;text-decoration:none; " title="Book Appointment">
        <span>BOOK AN APPOINTMENT<br> 
          TO VISIT US TOMORROW</span></a>
    </h3>
    </td>
  </tr>
</table>

Независимо от того, где я добавляю стиль для границы, он всегда охватывает всю ячейку, а не саму ячейку content .

Вот как с кодом:

Если я добавлю его в элемент span, он полностью нарушит границу, например:

Вот как мне это нужно:

Что я здесь не так делаю?

Answer 1

Это довольно просто и будет работать согласованно во всех почтовых клиентах.

Одна строка текста :

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="" style="margin: auto;">
  <tr>
    <td style="text-align: center;">
      <h3 style="margin: 0;"><a href="#" style="border: 2px solid #ffffff; font-family: sans-serif; font-weight: bold; font-size: 16px; line-height: 22px; text-decoration: none; padding: 20px 30px; color: #ff0000; display: block; letter-spacing: 2px;">Book An Appointment<br />To Visit Us Tomorrow</a></h3>
    </td>
  </tr>
</table>

Две строки текста :

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="260" style="margin: 0; border: 2px solid #ff0000;">
  <tr>
    <td style="background: #222222; border: 8px solid #222222; text-align: center;">
      <div style="padding: 10px 15px;">
        <a href="#" style="background: #222222; border: 1px solid #222222; font-family: sans-serif; font-weight: bold; font-size: 16px; line-height: 22px; text-decoration: none; color: #ffffff; display: block; letter-spacing: 2px; mso-line-height-alt: 22px;">Book An Appointment To Visit Us Tomorrow</a>
      </div>
    </td>
  </tr>
</table>

Если вам не нужна <h3> для программ чтения с экрана, я предлагаю удалить ее.

Удачи.

Answer 2

Есть много вариантов решения вашей проблемы: Один из них заключается в добавлении div вокруг содержимого вашей ячейки следующим образом:

table {background: black}
.contour {
    border: 2px solid #ccc;
    width: 50%;
    height: 20%;
    margin: 10px auto
}

    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td style="border:2px solid #ffffff; padding: 8px 10px;  border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;  text-decoration:none;">
        <div class="contour">
          <h3 style="color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:150%;letter-spacing:2px;text-decoration:none;text-align:center;">
            <a alias="" conversion="false" data-linkto="https://" href="google.com" style="color:#ffffff;text-decoration:none; " title="Book Appointment">
              <span>BOOK AN APPOINTMENT<br> 
                TO VISIT US TOMORROW</span></a>
          </h3>
        </div>
        </td>
      </tr>
    </table>

Еще один способ - использовать элемент a в качестве блока вокруг текста

table {background:black}
a {
  display:block; 
  border:2px solid #ccc;
  width: 50%;
  margin: 0 auto;
  padding:10px;
}

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td style="border:2px solid #ffffff; padding: 8px 10px;  border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;  text-decoration:none;">
    <div class="contour">
      <h3 style="color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:150%;letter-spacing:2px;text-decoration:none;text-align:center;">
        <a alias="" conversion="false" data-linkto="https://" href="google.com" style="color:#ffffff;text-decoration:none; " title="Book Appointment">
          <span>BOOK AN APPOINTMENT<br> 
            TO VISIT US TOMORROW</span></a>
      </h3>
    </div>
    </td>
  </tr>
</table>

Answer 3

Не стилизуйте таблицу, стилизуйте содержимое и упростите разметку:

    <td>
        <a alias="" conversion="false" data-linkto="https://" href="google.com"
 style="display:inline-block;border:2px solid #ffffff; padding: 8px 10px;color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:150%;letter-spacing:2px;text-decoration:none;text-align:center;" title="Book Appointment">
    BOOK AN APPOINTMENT<br> 
    TO VISIT US TOMORROW</a>
    </td>

Answer 4

Поместите границу на h3 и сделайте это inline-block

td {
  background: grey;
  text-align: center;
}

h3 {
  border: 1px solid white;
  display: inline-block;
}

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td style="padding: 8px 10px;  border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;  text-decoration:none;">
      <h3 style="color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:150%;letter-spacing:2px;text-decoration:none;text-align:center;">
        <a alias="" conversion="false" data-linkto="https://" href="google.com" style="color:#ffffff;text-decoration:none; " title="Book Appointment">
          <span>BOOK AN APPOINTMENT<br> 
          TO VISIT US TOMORROW</span></a>
      </h3>
    </td>
  </tr>
</table>