Est-il possible d'utiliser display:block sur les td en HTML, e-mail, pour obtenir sensibles de conception de table?
Ce fantastique article décrit comment créer responsive tables d'échelle fabuleusement pour les navigateurs mobiles.
Maintenant, je vais essayer d'appliquer la même technique pour les e-mails html, mais display:block
juste ne semble pas fonctionner dans les e-mails html.
De reproduire le problème:
- Enregistrer le code suivant dans une 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>
- Ouvrir la page dans Safari
- Redimensionner la fenêtre de noter comment les changements de table avec une fenêtre plus petite taille
- Appuyez sur CMD+i ou
File->Mail
Contenu de cette page afin de créer un e-mail HTML - Redimensionner la fenêtre de courriel de noter comment la table encore redimensionne correctement
- Envoyer l'e-mail à vous-même et de l'ouvrir.
- Maintenant, remarquez comment l'e-mail, en effet, répond à la requête des médias, mais sans succès restyles la table.
Je n'ai pas encore trouvé un client de messagerie qui affiche la table correctement. Est-ce une impasse ou vous avez des idées de solutions?
Sonne comme une impasse. CSS dans le HTML de l'email est notoirement peu fiables.
OriginalL'auteur chris | 2012-06-01
Vous devez vous connecter pour publier un commentaire.
La accepté de répondre fournit quelques info mais il ne traite pas de la question directement. J'ai fait des expériences avec des e-mails responsive récemment et sont venus avec quelques bonnes solutions, d'autres pourraient trouver utile. Ici, nous allons...
Pour répondre à la question, vous pouvez utiliser
display:block;
de faire des colonnes de la table se comportent comme des lignes sur certains appareils mobiles (Android, iOS et Kindle).Voici un exemple montrant comment vous faites 2 colonnes de mise en page de la pile (colonnes de gauche sur le haut de la colonne de droite) sur les appareils mobiles.
HTML
CSS
Remarque: La
body[yahoo]
sélecteur de empêche Yahoo de rendre les requêtes de média. Lebody
élément de mon e-mail a unyahoo="fix"
attribut.Ci-dessus CSS dit que si l'écran est moins de 640px de largeur puis la
td
s avec une classe defull
devraitdisplay:block
avecwidth:100%
.Maintenant, nous allons obtenir un peu plus évolué. Parfois, vous aurez besoin de la colonne sur la gauche de la pile en DESSOUS de la colonne de droite. Pour ce faire, nous pouvons utiliser
dir="rtl"
sur le contenanttable
pour inverser l'ordre des colonnes. Le CSS reste le même, voici le nouveau code HTML:HTML
Par l'ajout de la
dir="rtl"
nous sommes en disant qu'il inverse l'ordre des colonnes. La première colonne (dans le flux de l'HTML est affiché sur la droite, la seconde colonne (dans le code HTML) sur la gauche. Pour les écrans plus petits que 640px il affiche la première colonne (la colonne de droite) la première et la deuxième colonne (la colonne de gauche) à la seconde.Voici la HTML et CSS et une des captures d'écran à partir de Gmail et iOS 5 sont attachés.
td
ne sont plus des éléments de travail sur l'iphone.Avez-vous assurez-vous de garder la requête de média? Certaines Esp va supprimer <styles> à partir de l'en-tête, et dans l'ordre pour que cela fonctionne sous iOS, le <styles> besoin de rester dans l'en-tête.
En fait, j'ai manque le
<!DOCTYPE>
et<body>
éléments! Qui va briser les mises en page, même si les questions des médias et de<style>
est là. #facepalmOriginalL'auteur Brett DeWoody
Je vous suggère de consulter cette: http://www.campaignmonitor.com/css/
Bien que pas très à jour, c'est une ressource formidable en termes de prise en charge de css pour les e-mails. Malheureusement, lors de la construction de modèles d'e-mail, vous devez tenir compte non seulement des navigateurs, mais différents exemple, les clients Outlook et le css du soutien qu'ils offrent est notoirement pauvres.
En plus de cela, les fournisseurs de messagerie comme gmail ont tendance à retirer certaines parties de votre document (par exemple, la balise head) de sorte qu'il devient vraiment difficile l'application d'un responsive design concepts à un public (les clients de messagerie) qui a de très mauvais soutien de base de css.
OriginalL'auteur Luca
J'ai été capable de le faire fonctionner, voici le résultat:
https://litmus.com/pub/d9ac198
Voici un code que j'ai utiliser pour forcer la banque td afin de se comporter comme des lignes:
Si cela ne fonctionne pas pour vous, sur iOS, la réponse est ici. Vous devez définir display: block et width: 100% sur les lignes de la table (tr) ainsi que sur les cellules (td). M'a pris les âges de la voir, même si elle était juste en face de moi 😐
OriginalL'auteur Maxim
Une autre approche est de travailler avec 2 dessins en un seul e-mail: l'un pour le bureau, les lecteurs, et un pour les mobiles, les lecteurs, comme demosntrated ici.
OriginalL'auteur cptstarling
Je suis d'avoir exactement le même problème! J'ai pensé qu'il serait juste de travailler sur le Courrier sur les appareils iOS, mais il se passe exactement ce que vous êtes en train de dire qu'il fonctionne jusqu'à ce que vous avez réellement l'envoyer.
@Luca, nous savons que le soutien n'est pas grand, mais les media queries sont ignorés par la plupart c'est donc une belle touche à ajouter, si vous voulez que l'e-mail à l'air un peu mieux sur le moderne, les clients de messagerie. Outlook et d'autres pourraient encore obtenir le 'normal' e-mail en HTML, sans les requêtes de média/responsive tables.
OriginalL'auteur Dinis Correia
J'ai trouvé que l'utilisation des media queries pour empiler des éléments td pour les appareils mobiles, comme ce
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.
OriginalL'auteur heyhugo