1. casa
  2. Domanda e risposta
  3. È possibile utilizzare display: blocco su td nell'email HTML, per ottenere un design reattivo della tabella?

È possibile utilizzare display: blocco su td nell'email HTML, per ottenere un design reattivo della tabella?

2012-06-01 12 views
11

Questo fantastico articolo descrive come creare tabelle reattive che si adattino in modo favoloso ai browser mobili.È possibile utilizzare display: blocco su td nell'email HTML, per ottenere un design reattivo della tabella?

Ora sto provando ad applicare la stessa tecnica alle e-mail html ma lo display:block non sembra funzionare in e-mail html.

di riprodurre il problema:

  1. Salvare il codice seguente come una pagina 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. Aprire la pagina in Safari

  3. Ridimensionare la finestra notare come cambia la tabella con una dimensione della finestra più piccola

  4. Press CMD + i o File->Mail i contenuti della pagina per creare un email HTML

  5. Ridimensionare la finestra e-mail notare come il tavolo si ridimensiona ancora correttamente

  6. inviare l'email a se stessi e aprilo.

  7. Ora notate come l'e-mail risponde effettivamente alla query sui media ma ripristina la tabella senza successo.

Devo ancora trovare un client di posta elettronica che visualizzi correttamente la tabella. È un vicolo cieco o hai idee su soluzioni alternative?

fonte

2012-06-01 chris

+2

Sembra un vicolo cieco. Il CSS nell'email HTML è notoriamente inaffidabile. – thirtydot

risposta

14

La risposta accettata fornisce alcune informazioni interessanti ma non indirizza direttamente la domanda. Recentemente ho sperimentato con email reattive e ho trovato alcune buone soluzioni che gli altri potrebbero trovare utili. Qui andiamo ...

Per rispondere alla domanda, è possibile utilizzare display:block; per rendere le colonne di tabella si comportano come righe su alcuni dispositivi mobili (Android, iOS e Kindle).

Ecco un esempio che mostra come creare uno stack di layout a 2 colonne (colonne a sinistra in alto a destra) su dispositivi mobili.

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

Nota: Il body[yahoo] selettore prevents Yahoo from rendering the media queries. L'elemento body della mia email ha un attributo yahoo="fix".

È possibile che questo CSS dice che se lo schermo è inferiore a 640px di larghezza poi i td s con una classe di full dovrebbe display:block con width:100%.

Ora, andiamo un po 'più alla moda. A volte vuoi la colonna a sinistra per impilare sotto la colonna a destra. Per fare questo possiamo usare dir="rtl" sul contenitore table per capovolgere l'ordine delle colonne. Il CSS rimane lo stesso, ecco il nuovo 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>

Aggiungendo la dir="rtl" stiamo dicendogli di invertire l'ordine delle colonne. La prima colonna (nel flusso dell'HTML) viene visualizzata a destra, la seconda colonna (nell'HTML) a sinistra. Per schermi inferiori a 640px visualizza prima la prima colonna (la colonna a destra) e la seconda colonna (la colonna a sinistra) per secondo.

Ecco lo full HTML and CSS e sono allegati uno screenshot di Gmail e iOS 5.

Gmail iOS 5 Android 4

fonte

2013-08-31 06:10:35

+0

Ho appena provato il tuo codice esatto copiando e incollando in Litmus, e non sembra impilare per me in iPhone 5. Ho anche provato questa tecnica in una e-mail che ho inviato a me stesso. Forse, display: il blocco sugli elementi 'td' non funziona più su iphone. – Chanpory

+0

@Chanpory: sei sicuro di mantenere la query multimediale? Alcuni ESP rimuoveranno dall'intestazione e, affinché funzioni in iOS, l' deve rimanere nell'intestazione. –

+1

Risulta mancano gli elementi '' e ''! Ciò interromperà i layout, anche se le query multimediali e '