web-dev-qa-db-fra.com

Est-il possible d'utiliser display: block on td dans un courrier électronique HTML pour créer un tableau réactif?

Cet article fantastique décrit comment créer des tables réactives qui s’adaptent parfaitement aux navigateurs mobiles.

Maintenant, j'essaie d'appliquer la même technique aux courriels HTML, mais display:block ne semble tout simplement pas fonctionner dans les courriels HTML.

Pour reproduire le problème:

  1. Enregistrez le code suivant en tant que page HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        @media only screen and (max-width: 760px), screen and (max-device-width: 480px)  {
            /* Force table to not be like tables anymore */
            table, td, tbody, tr{
                    display: block;
                    width:100%;
                    padding:0;
                    clear:both;
            }
            td {
                    /* Behave  like a "row" */
                    position: relative !important;
            }
        }
    </style>
</head>
<body>
    <table style="width:100%;">
        <tr>
            <td style="border:1px solid red;">1/1</td>
            <td style="border:1px solid red;">1/2</td>
            <td style="border:1px solid red;">1/3</td>
        </tr>
        <tr>
            <td style="border:1px solid red;">2/1</td>
            <td style="border:1px solid red;">2/2</td>
            <td style="border:1px solid red;">2/3</td>
        </tr>
    </table>
</body>
</html>

  2. Ouvrir la page dans Safari

  3. Redimensionnez la fenêtre pour noter comment la table change avec une taille de fenêtre plus petite

  4. Presse CMD+i ou File->Mail Contenu de cette page pour créer un email HTML

  5. Redimensionner la fenêtre de courrier électronique pour noter le redimensionnement correct du tableau

  6. Envoyez le courrier électronique à vous-même et ouvrez-le.

  7. Remarquez maintenant comment le courrier électronique répond effectivement à la requête multimédia mais ne modifie pas le style de la table.

Je n'ai pas encore trouvé de client de messagerie affichant correctement le tableau. Est-ce une impasse ou avez-vous des idées de solutions de contournement?

htmlcsshtml-tablemedia-querieshtml-email
11
chris

La réponse acceptée fournit de bonnes informations mais ne répond pas directement à la question. J'ai récemment essayé des courriels réactifs et j'ai trouvé de bonnes solutions que d'autres pourraient trouver utiles. Et c'est parti...

Pour répondre à la question, vous pouvez utiliser display:block; pour que les colonnes de tableau se comportent comme des lignes sur certains appareils mobiles (Android, iOS et Kindle).

Voici un exemple montrant comment créer une pile de disposition à 2 colonnes (colonnes de gauche en haut de la colonne de droite) sur des appareils mobiles.

HTML

<table class="deviceWidth" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
  <tr>
    <td width="50%" align="right" class="full">
      <p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
        <a href="#"><img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>  
      </p>                  
    </td>
    <td width="50%" align="left" class="full">
        <a href="#"><img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>                     
    </td>
  </tr>
</table>

CSS

@media only screen and (max-width: 640px)  {
    body[yahoo] .deviceWidth {width:440px!important; }  T 

    body[yahoo] .full {
        display:block;
        width:100%;
    }
}

Remarque: Le sélecteur body[yahoo]empêche Yahoo de rendre les requêtes multimédia . L'élément body de mon email a un attribut yahoo="fix".

Le CSS ci-dessus indique que si la largeur de l’écran est inférieure à 640 pixels, les tds avec une classe de full devraient display:block avec width:100%.

Maintenant, soyons un peu plus exigeants. Parfois, vous voudrez que la colonne de gauche s’empile EN BAS de la colonne de droite. Pour ce faire, nous pouvons utiliser dir="rtl" sur la variable table contenant afin d'inverser l'ordre des colonnes. Le CSS reste le même, voici le nouveau code HTML:

HTML

<table class="deviceWidth" dir="rtl"  width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
  <tr>
    <td width="50%" dir="ltr" align="right" class="full">
      <p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
        <a href="#"><img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a> 
      </p>                  
    </td>
    <td width="50%" dir="ltr" align="left" class="full">
        <a href="#"><img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>                      
    </td>
  </tr>
</table>

En ajoutant le dir="rtl", nous lui disons d'inverser l'ordre des colonnes. La première colonne (dans le flux du HTML) est affichée à droite, la deuxième colonne (dans le HTML) à gauche. Pour les écrans de moins de 640 pixels, la première colonne (la colonne de droite) est affichée en premier, et la deuxième colonne (la colonne de gauche) en second.

Voici le HTML complet et CSS et des captures d’écran de Gmail et iOS 5 sont jointes.

GmailiOS 5Android 4

14
Brett DeWoody

J'ai pu le faire fonctionner, voici le résultat: https://litmus.com/pub/d9ac198

Voici un code que j'utilise pour forcer td à se comporter comme des lignes:

table[class="magic"],
table[class="magic"] tbody,
table[class="magic"] tr,
table[class="magic"] td {
    display: block !important;
    width: 100%;
}
2
Maxim

Je vous suggère de vous référer à ceci: http://www.campaignmonitor.com/css/

Bien que pas très à jour, c'est une excellente ressource en termes de support CSS pour les emails. Malheureusement, lors de la création de modèles de courrier électronique, vous devez tenir compte non seulement des navigateurs, mais également de différents clients, par exemple. Outlook et le support CSS qu'ils proposent sont notoirement pauvres.

De plus, les fournisseurs de messagerie tels que gmail ont tendance à supprimer certaines parties de votre document (par exemple, l'étiquette de tête), de sorte qu'il devient très difficile d'appliquer des concepts de conception réactifs à un public (les clients de messagerie) qui ne prend en charge que très peu, même de base. css.

2
Luca

Une autre approche consiste à utiliser deux modèles dans un seul courrier électronique: un pour les lecteurs de bureau et un pour les lecteurs mobiles, tel que présenté ici .

1
cptstarling

J'ai exactement le même problème! Je pensais que cela ne fonctionnerait que sur Mail sur les appareils iOS, mais cela se passe exactement comme vous le dites - cela fonctionne jusqu'à ce que vous l'envoyiez réellement.

@Luca, nous savons que le support n'est pas génial, mais la plupart des requêtes multimédia sont ignorées. Il est donc agréable de les ajouter si vous voulez que l'e-mail ait une meilleure apparence sur les clients de messagerie modernes. Outlook et les autres utilisateurs recevraient toujours le courrier électronique HTML "normal", sans les requêtes multimédia/les tables réactives.

0
Dinis Correia

J'ai constaté que l'utilisation de requêtes multimédia pour empiler des éléments td sur des appareils mobiles tels que celui-ci

td[class="stack-content"] {display:block !important}

semble fonctionner pour la plupart des appareils, à l'exception de Windows Phone 7 qui, apparemment, ne prend pas en charge la propriété display: block.

0
heyhugo