CSS pour faire table 100% de max-width
Le suivant pour un modèle de courriel:
<style>
@import url("http://fonts.googleapis.com/css?family=Open Sans");
</style>
<div style="width:100%; background:#F2F2F2">
<table style="padding: 25px; margin: 0 auto; font-family:'Open Sans', 'Helvetica', 'Arial';">
<tr align="center" style="margin: 0; padding: 0;">
<td>
<table style="border-style:solid; border-width:2px; border-color: #c3d2d9;" cellspacing="0">
<tr style="background-color: white;">
<td style="width: 700px; padding: 10px 15px 10px 15px; color: #000000;">
<p>Some content here</p>
<span style="font-weight: bold;">My Signature</span><br/>
My Title<br/>
My Company<br/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
La table sera exactement 700 pixels de large est ce qui est nécessaire. Cependant, parce que sa largeur fixe, il ne peut pas redimensionner sur les appareils avec moins de 700 pixels de largeur. Mais si je modifie le td élément:
<td style="max-width: 700px; width: 90%; padding: 10px 15px 10px 15px; color: #000000;">
<p>Some content here</p>
<span style="font-weight: bold;">My Signature</span><br/>
My Title<br/>
My Company<br/>
</td>
Alors la table est seulement ~100px de large.
Comment réorganiser le CSS pour faire en sorte que la table est 700 pixels mais redimensionne la fenêtre d'affichage diminue?
Donner
Je pense qu'il a de style en ligne parce que c'est un modèle de courriel
Il est important de styles en ligne lorsque vous travaillez avec HTML, e-mail, sauf si vous ne voulez pas de support de Gmail, qui ignore le style de la balise.
width: 90%
à la première table, width: 100%
à la deuxième table et aussi essayez de ne pas utiliser inline style..Je pense qu'il a de style en ligne parce que c'est un modèle de courriel
Il est important de styles en ligne lorsque vous travaillez avec HTML, e-mail, sauf si vous ne voulez pas de support de Gmail, qui ignore le style de la balise.
OriginalL'auteur Noah Goodrich | 2013-09-27
Vous devez vous connecter pour publier un commentaire.
Comme ce
démo
css
Ne fonctionne pas: jsfiddle.net/Lj9Gy/194
OriginalL'auteur Falguni Panchal
J'ai eu le même problème c'était grâce à qui j'ai eu la classe de bootstrap "hidden-lg" sur la table qui l'a fait bêtement devenir display: block !important;
Je me demande comment Bootstrap jamais considéré à juste plutôt faire ceci:
Et puis il suffit de laisser l'élément quel que soit l'affichage, il avait avant pour d'autres screensizes.. c'est peut-être trop avancé pour eux de comprendre..
De toute façon donc:
devrait fonctionner
OriginalL'auteur OZZIE
Vous devez utiliser:
Démo
OriginalL'auteur Pablo
max-width n'est certainement pas bien pris en charge. Si vous allez l'utiliser, l'utiliser dans une requête de média dans votre style de la balise. ios, android et windows phone de messagerie par défaut tous les soutenir. (gmail et outlook mobile ne le font pas)
http://www.campaignmonitor.com/guides/mobile/targeting/
Regarder le starbucks exemple au bas
OriginalL'auteur zazzyzeph
J'ai une très bonne solution de travail pour les tables de
max-width: 100%
.Utilisez simplement
word-break: break-all;
pour les cellules de tableau (à l'exception de la rubrique cellules) pour briser tous les long texte sur plusieurs lignes:Ce rendu sera comme ceci (lorsque la largeur de l'écran est limitée):
OriginalL'auteur Svetlin Nakov
J'ai eu à utiliser:
La
table
seul n'était pas suffisant, letbody
a également été nécessaires pour qu'il fonctionne pour moi.OriginalL'auteur Danny Beckett
Utiliser ceci :
OriginalL'auteur Sunil Kumar