web-dev-qa-db-fra.com

CSS pour faire table 100% de max-width

Compte tenu des éléments suivants pour un modèle de courrier électronique:

<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 aura exactement 700px de large est ce qui est nécessaire. Cependant, étant donné sa largeur entièrement fixe, il ne peut pas être redimensionné sur des périphériques d’une largeur inférieure à 700 px. Mais si je modifie l'élément td en ceci:

<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>

Ensuite, la table ne fait que ~ 100 pixels de large.

Comment pourrais-je réorganiser le CSS pour faire en sorte que la table soit 700px mais redimensionne lorsque la fenêtre devient plus petite?

csshtml-tablewidthhtml-email
11
Noah Goodrich

Comme ça

démo

css

table{
    width:100%;
}
15
Falguni Panchal

J'avais le même problème, car j'avais la classe de bootstrap "hidden-lg" sur la table, ce qui la faisait bêtement afficher: block! Important;

Je me demande comment Bootstrap n'a jamais envisagé de faire ceci à la place:

@media (min-width: 1200px) {
    .hidden-lg {
         display: none;
    }
}

Et puis, il suffit de laisser l’élément qu’il a déjà affiché pour d’autres écrans. Peut-être est-il trop avancé pour qu’ils puissent le comprendre ..

Quoi qu'il en soit alors:

table {
    display: table; /* check so these really applies */
    width: 100%;
}

devrait marcher

2
OZZIE

Vous devez utiliser:

    table{
        width:100%;
        table-layout: fixed;
        overflow-wrap: break-Word;
    }

Démo

1
Pablo

J'ai une solution très efficace pour les tables de max-width: 100%. Utilisez simplement Word-break: break-all; pour les cellules de table (à l'exception des cellules d'en-tête) pour fractionner tout le texte intégral en plusieurs lignes:

<!DOCTYPE html>
<html>
<head>
<style>

table {
  max-width: 100%; 
}
table td {
  Word-break: break-all;
}

</style>
</head>
<body>

<table border="1">
  <tr>
    <th><strong>Input</strong></th>
    <th><strong>Output</strong></th>
  </tr>
  <tr>
    <td>some text</td>
    <td>12b6459fc6b4cabb4b1990be1a78e4dc5fa79c3a0fe9aa9f0386d673cfb762171a4aaa363b8dac4c33e0ad23e4830888</td>
  </tr>
</table>

</body>
</html>

Cela rendra comme ceci (lorsque la largeur de l'écran est limitée):

0
Svetlin Nakov

max-width n'est certainement pas bien supporté. Si vous allez l'utiliser, utilisez-le dans une requête multimédia dans votre balise de style. ios, Android et le courrier électronique par défaut de Windows Phone les prennent tous en charge. (gmail et Outlook mobile ne le font pas)

http://www.campaignmonitor.com/guides/mobile/targeting/

Regardez l'exemple de starbucks en bas

0
zazzyzeph

Je devais utiliser:

table, tbody {
    width: 100%;
}

La table ne suffisait pas, il fallait aussi la tbody pour que cela fonctionne pour moi.

0
Danny Beckett