Comment conserver la taille fixe de la signature électronique HTML?

J'ai un problème avec une signature d'email pour. il s'agit essentiellement d'une table avec des bordures qui ne sont pas visibles (pour faciliter l'alignement de tous les éléments). Il y a 6 rangées, 3 d'entre elles contiennent des images, la dernière contient des éléments légaux (une seule cellule par rangée). 2 lignes sont différentes: chacune a deux cellules (gauche et droite). Le problème est que, lorsque j'envoie l'e-mail, il semble très bien dans Outlook Web App, mais dans l'application de bureau Outlook, les deux lignes de deux cellules sont regroupées à gauche. J'ai essayé d'en faire une position et une largeur fixes, mais je n'arrive pas à m'en sortir. Toutes les suggestions, qu'est-ce que je fais mal?Comment conserver la taille fixe de la signature électronique HTML?

<head> 
</head> 

<html> 
<body> 

    <table style="table-layout:fixed;margin-top:30px;margin-left:0px;margin-bottom:30px;width:95%;border:0"> 
    <!--1--> 
     <tr> 
      <td> 
       <table style="table-layout:fixed"> 
        <tr> 
         <td width="230">  
          <p> 
           <span style="color:#eb0008; font-size:20px; font-family:'Trebuchet MS',helvetica,San-Serif"><strong>%%displayname%%</strong></span><br /> 
           <span style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif">%%title%%</span> 
          </p> 
         </td> 

         <td width="340" > 
          <p style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif"> 
           <span style="color:#919191; font-size:13px;">mobile:</span> %%mobilenumber%%<br /> 
           <span style="color:#919191; font-size:13px;">email:</span> %%email%% 
          </p> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 

    <!--2--> 
     <tr> 
      <td> 

       <img style="margin:15px 0 8px 0" src="img" alt="linia" width="15" height="2" /> 

      </td> 
     </tr> 

    <!--3--> 
     <tr> 
      <td> 

       <img style="margin:0 0 10px 0" src="img" alt="technic logo" width="160" height="47" /> 

      </td> 
     </tr> 

    <!--4--> 
     <tr> 
      <td> 
       <table style="table-layout:fixed"> 
        <tr> 
         <td width="230px" overflow="hidden"> 
          <p style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif"> 



           Address1 

           <br /> Address1 

           <br /> Address1 

           <br /> Address1 



          </p> 

         </td> 

         <td width="340"> 



          <p style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif;"> 

           <span style="color:#919191;">nr telefonu:</span>number 

           <br /> 

           <span style="color:#919191;">nr fax:</span>number 

           <br /> 

           <span style="color:#919191;">del:</span>address 

           <br /> 

           <span style="color:#919191;">www:</span> <a href="http://www.google.com" target="_blank" style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif; text-decoration:none;">www.google.com</a> 

          </p> 





         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 

    <!--5-->  
     <tr> 
      <td> 

       <img style="margin:15px 0 8px 0" src="img" alt="linia" width="15" height="2" /> 

      </td> 
     </tr> 

    <!--6--> 
     <tr> 
      <td> 



       <p style="padding:0;margin:0; color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif"> 



        LEGAL STUFF 





       </p> 



      </td> 
     </tr> 
    </table> 

</body> 
</html>

Source

2017-09-28 kjubus

Pouvez-vous ajouter capture d'écran pour la conception de votre table? –

Salut Anmol La capture d'écran est ici: https://imgur.com/a/2DxI2 J'ai essayé de le faire de multiples façons (c'est pourquoi j'ai 2 tables imbriquées dans la première, pour ceux Rangées de 2 cellules). Ici, il est montré avec des bordures supplémentaires. – kjubus

Code semble bon, il pourrait y avoir un problème de support, même si je vais mettre à jour votre code et l'afficher, –

Il y a peu de chose qui peut vous aider à créer emailer parfait

marges éviter, utiliser l'attribut td de hauteur.
évitez de donner la largeur n%, pixel est une meilleure approche.

<table style="width:600px;border:0" width="600" align="center"> 
 
    <!--1--> 
 
     <tr> 
 
      <td> 
 
       <table style="width:100%;"> 
 
        <tr> 
 
         <td width="230">  
 
          <p> 
 
           <span style="color:#eb0008; font-size:20px; font-family:'Trebuchet MS',helvetica,San-Serif"><strong>%%displayname%%</strong></span><br /> 
 
           <span style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif">%%title%%</span> 
 
          </p> 
 
         </td> 
 

 
         <td width="340" > 
 
          <p style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif"> 
 
           <span style="color:#919191; font-size:13px;">mobile:</span> %%mobilenumber%%<br /> 
 
           <span style="color:#919191; font-size:13px;">email:</span> %%email%% 
 
          </p> 
 
         </td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
     </tr> 
 

 
    <!--2--> 
 
     <tr> 
 
      <td> 
 

 
       <table style="width: 100%;"> 
 
       <tr> 
 
       <td height="15"></td> 
 
       </tr> 
 
       <tr> 
 
       <td><img src="https://dummyimage.com/200x200/000/fff" alt="linia" width="200"/></td> 
 
       </tr> 
 
       <tr> 
 
       <td height="8"></td> 
 
       </tr> 
 
       </table> 
 

 
      </td> 
 
     </tr> 
 

 
    <!--3--> 
 
     <tr> 
 
      <td> 
 

 
       <table style="width: 100%;"> 
 
       <tr> 
 
       <td height="15"></td> 
 
       </tr> 
 
       <tr> 
 
       <td><img src="https://dummyimage.com/200x200/000/fff" alt="linia" width="200"/></td> 
 
       </tr> 
 
       <tr> 
 
       <td height="8"></td> 
 
       </tr> 
 
       </table> 
 

 
      </td> 
 
     </tr> 
 

 
    <!--4--> 
 
     <tr> 
 
      <td> 
 
       <table style="width:100%;"> 
 
        <tr> 
 
         <td width="230px" overflow="hidden"> 
 
          <p style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif"> Address1<br /> Address1<br /> Address1<br /> Address1</p> 
 
         </td> 
 

 
         <td width="340"> 
 
         <p style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif;"> 
 

 
           <span style="color:#919191;">nr telefonu:</span>number 
 

 
           <br /> 
 

 
           <span style="color:#919191;">nr fax:</span>number 
 

 
           <br /> 
 

 
           <span style="color:#919191;">del:</span>address 
 

 
           <br /> 
 

 
           <span style="color:#919191;">www:</span> <a href="http://www.google.com" target="_blank" style="color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif; text-decoration:none;">www.google.com</a> 
 

 
          </p> 
 
          </td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
     </tr> 
 

 
    <!--5-->  
 
     <tr> 
 
      <td> 
 
       <table style="width: 100%;"> 
 
       <tr> 
 
       <td height="15"></td> 
 
       </tr> 
 
       <tr> 
 
       <td><img src="https://dummyimage.com/200x200/000/fff" alt="linia" width="200"/></td> 
 
       </tr> 
 
       <tr> 
 
       <td height="8"></td> 
 
       </tr> 
 
       </table> 
 
      </td> 
 
     </tr> 
 

 
    <!--6--> 
 
     <tr> 
 
      <td> 
 
      <p style="padding:0;margin:0; color:#1c1c1c; font-size:13px; font-family:'Trebuchet MS',helvetica,San-Serif">LEGAL STUFF</p> 
 
      </td> 
 
     </tr> 
 
    </table>

Source

2017-09-29 05:34:43

semble fonctionner pour nous. Bien que les gens qui approuvent dans la compagnie n'aiment pas vraiment ajouter des rangées d'espace vide;) – kjubus

Oui, mais pour les perspectives, nous devons gérer cela parce qu'ils n'acceptent pas les marges et les paddings. –

Comment conserver la taille fixe de la signature électronique HTML?

Répondre

Questions connexes