webentwicklung-frage-antwort-db.com.de

Ist es möglich, display: block on td in HTML-E-Mails zu verwenden, um ein ansprechendes Tabellendesign zu erzielen?

Dieser fantastische Artikel beschreibt, wie Sie reaktionsschnelle Tabellen erstellen, die sich hervorragend auf mobile Browser skalieren lassen.

Jetzt versuche ich, die gleiche Technik auf HTML-E-Mails anzuwenden, aber display:block scheint in HTML-E-Mails nicht zu funktionieren.

m das Problem zu reproduzieren:

  1. Speichern Sie den folgenden Code als HTML-Seite:

    <!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. Öffnen Sie die Seite in Safari

  3. Ändern Sie die Größe des Fensters, um festzustellen, wie sich die Tabelle bei einer kleineren Fenstergröße ändert

  4. Drücken Sie CMD+i oder File->Mail Inhalt dieser Seite zum Erstellen einer HTML-E-Mail

  5. Ändern Sie die Größe des E-Mail-Fensters, um festzustellen, ob die Größe der Tabelle noch korrekt ist

  6. Senden Sie die E-Mail an sich selbst und öffnen Sie sie.

  7. Beachten Sie nun, wie die E-Mail zwar auf die Medienabfrage reagiert, die Tabelle jedoch nicht erfolgreich neu formatiert.

Ich habe noch keinen E-Mail-Client gefunden, der die Tabelle korrekt anzeigt. Ist dies eine Sackgasse oder haben Sie Ideen für Problemumgehungen?

htmlcsshtml-tablemedia-querieshtml-email
11
chris

Die akzeptierte Antwort enthält einige nützliche Informationen, die Frage wird jedoch nicht direkt beantwortet. Ich habe in letzter Zeit mit reaktionsschnellen E-Mails experimentiert und mir einige gute Lösungen ausgedacht, die andere vielleicht nützlich finden. Auf geht's...

Um die Frage zu beantworten, können Sie display:block; verwenden, damit Tabellenspalten auf einigen Mobilgeräten (Android, iOS und Kindle) als Zeilen angezeigt werden.

Das folgende Beispiel zeigt, wie Sie auf Mobilgeräten einen zweispaltigen Layoutstapel (linke Spalte über rechte Spalte) erstellen.

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%;
    }
}

Hinweis: Der body[yahoo]-Selektor verhindert, dass Yahoo die Medienabfragen rendert . Das body -Element meiner E-Mail hat ein yahoo="fix"-Attribut.

Das obige CSS besagt, dass tds mit einer Klasse von full mit display:blockwidth:100% sein sollte, wenn der Bildschirm eine Breite von weniger als 640px hat.

Jetzt wollen wir ein bisschen ausgefallener werden. Manchmal soll die linke Spalte UNTER der rechten Spalte gestapelt werden. Dazu können wir dir="rtl" für die enthaltende table verwenden, um die Reihenfolge der Spalten umzukehren. Das CSS bleibt gleich, hier ist das neue 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>

Indem wir den dir="rtl" hinzufügen, weisen wir ihn an, die Reihenfolge der Spalten umzukehren. Die erste Spalte (im Ablauf des HTML) wird rechts angezeigt, die zweite Spalte (im HTML) links. Bei Bildschirmen, die kleiner als 640 Pixel sind, wird zuerst die erste Spalte (die rechte Spalte) und dann die zweite Spalte (die linke Spalte) angezeigt.

Hier ist das vollständige HTML und CSS und ein Screenshot von Gmail und iOS 5 beigefügt.

GmailiOS 5Android 4

14
Brett DeWoody

Ich konnte es zum Laufen bringen, hier ist das Ergebnis: https://litmus.com/pub/d9ac198

Hier ist ein Code, mit dem ich td zwinge, sich wie Zeilen zu verhalten:

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

Ich schlage vor, Sie beziehen sich auf diese: http://www.campaignmonitor.com/css/

Obwohl es nicht sehr aktuell ist, ist es eine großartige Ressource in Bezug auf die CSS-Unterstützung für E-Mails. Leider müssen Sie beim Erstellen von E-Mail-Vorlagen nicht nur Browser berücksichtigen, sondern auch verschiedene Clients, z. Outlook und der von ihnen angebotene CSS-Support sind notorisch schlecht.

Darüber hinaus entfernen E-Mail-Anbieter wie Google Mail in der Regel bestimmte Teile Ihres Dokuments (z. B. das Head-Tag), sodass es sehr schwierig wird, reaktionsschnelle Designkonzepte auf eine Zielgruppe (die E-Mail-Clients) anzuwenden, die selbst grundlegende Funktionen nur unzureichend unterstützt CSS.

2
Luca

Ein anderer Ansatz besteht darin, mit zwei Designs in einer E-Mail zu arbeiten: eines für Desktop-Reader und eines für mobile Reader als hier demosntriert .

1
cptstarling

Ich habe genau das gleiche Problem! Ich dachte, es würde nur bei Mail auf iOS-Geräten funktionieren, aber es passiert genau das, was Sie sagen - es funktioniert, bis Sie es tatsächlich senden.

@Luca, wir wissen, dass die Unterstützung nicht großartig ist, aber Medienabfragen werden von den meisten ignoriert. Es ist also eine nette Geste, wenn Sie möchten, dass die E-Mail auf modernen E-Mail-Clients ein bisschen besser aussieht. Outlook und andere würden weiterhin die "normale" HTML-E-Mail erhalten, ohne die Medienabfragen/Antworttabellen.

0
Dinis Correia

Ich habe festgestellt, dass Medienabfragen zum Stapeln von td-Elementen für mobile Geräte wie dieses verwendet werden

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

scheint für die meisten Geräte mit Ausnahme von Windows Phone 7 zu funktionieren, das die Eigenschaft display: block anscheinend nicht unterstützt.

0
heyhugo