Comment rendre cette signature électronique réactive/mobile?

Question

J'ai une signature électronique qui consiste en une simple table (une ligne, deux colonnes). La première colonne a un logo, la deuxième colonne contient tous les détails de contact.

Je voudrais le rendre réactif de sorte que sur les petits appareils, le logo est montré ci-dessus, et les détails de contact ci-dessous (si bien que les colonnes se transforment en rangées). Actuellement, sur les petits appareils, la table est compressée de sorte que les détails de contact ne sont pas lisibles.

<div style="color: #222222; font-family: arial, sans-serif; font-size: 12.8px;"> 
    <div class="m_159975109461180827gmail_signature"> 
    <div dir="ltr"> 
     <div dir="ltr"> 
     <table style="color: #000000; font-family: 'Times New Roman'; font-size: medium; background: none; margin: 0px; padding: 0px; border: 0px initial initial;" border="0" cellspacing="0" cellpadding="0"> 
      <tbody> 
      <tr> 
       <td style="font-family: arial, sans-serif; margin: 0px; border-top: 0px; border-right-width: 3px; border-right-color: #d2ac67; padding: 0px 7px 0px 0px; vertical-align: middle;" valign="top"><img class="CToWUd" src="http://mywebsite.com/logo-small.png" alt="" /></td> 
       <td style="font-family: arial, sans-serif; margin: 0px; padding: 0px 0px 0px 12px;"> 
       <table style="background: none; margin: 0px; padding: 0px; height: 93px; border: 0px initial initial;" border="0" width="300" cellspacing="0" cellpadding="0"> 
        <tbody> 
        <tr> 
         <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; padding-bottom: 5px; color: #d2ac67; font-size: 14px;" colspan="2"><strong>My Name</strong></td> 
        </tr> 
        <tr> 
         <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; color: #333333; font-size: 12px;" colspan="2"><span style="color: #d2ac67;">My position&nbsp;&bull;&nbsp;Name of the company</span></td> 
        </tr> 
        <tr> 
         <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">p:</td> 
         <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top"><a style="color: #1155cc;" href="tel:+44%2020%207099%206646" target="_blank">+44 1234566</a>&nbsp;&nbsp;<span style="color: #d2ac67;">m:&nbsp;</span><a style="color: #1155cc;" href="tel:+44%207491%20044801" target="_blank">+44&nbsp;1</a>234567</td> 
        </tr> 
        <tr> 
         <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">a:</td> 
         <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top">some addresss</td> 
        </tr> 
        <tr> 
         <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; width: 20px; color: #d2ac67; font-size: 12px;" valign="top" width="20">w:</td> 
         <td style="font-family: Arial, Helvetica, sans-serif; margin: 0px; vertical-align: top; color: #333333; font-size: 12px;" valign="top">link to the website</td> 
        </tr> 
        </tbody> 
       </table> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 
    </div> 
    </div> 
</div> 

Merci d'avance pour votre aide/conseils.

Answer 1

Si vous souhaitez utiliser une table, créez une autre table avec vos lignes comme colonnes et attribuez une classe à chaque table. Utilisez css pour masquer et afficher les différentes tables à l'aide d'appels multimédias.