Dev Faq
-1
votes

Email HTML Bordure sur le contenu, pas la cellule?

<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>
No matter where I add the styling for border, it always wraps the entire cell, not the cell content itself. Here's how it is with the code:If I add it on the span element, it breaks the border entirely, like this:Here's how I need it to be:What am I doing wrong here?
1 commentaires

Impossible d'exécuter le code sur jsfiddle ou si tellement extrait, vérification des pls

4 Réponses :

1
votes

Mettez la bordure sur le h3 code> et le faire inline-block code>

p> 

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

0 commentaires
2
votes

Il y a beaucoup de solution pour votre problème: On consiste à ajouter un div autour de votre contenu de la cellule comme suit:

p> 

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

1 commentaires

Div's ne fonctionne pas correctement sur tous les clients de messagerie (Outlook ignore bloc d'affichage et inline-block de divs). Le A peut fonctionner correctement.

1
votes

Ne pas styles la table, styez le contenu et simplifiez votre balisage: 

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

0 commentaires
3
votes

Ceci est assez simple et fonctionnera de manière cohérente sur tous les clients de messagerie.

ligne unique de texte : xxx

deux Lignes de texte : xxx

sauf si vous avez besoin du

pour les lecteurs d'écran, je suggère de le supprimer.

bonne chance.

2 commentaires

Merci pour l'aide! Il semble fonctionner en effet, mais seulement des perspectives sépare les frontières pour eux semble. Je verrai si je peux comprendre celui-là moi-même.

@Rain mes excuses. J'ai oublié Outlook en fait cela à un href avec deux lignes de texte. J'ai donc révisé ma réponse et l'avez testé dans Litimus. Les deux lignes de texte reçoivent une perspective beaucoup plus proche de la façon dont vous le souhaitez.

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor