HTML电子邮件-GMAIL显示块无法正常工作

Question

I've been creating a HTML email campaign that has to be responsive. On desktop, the email has 2 columns, but on mobile it has to display them as 1 column.

This is working in other clients as expected, but in Gmail, the column (td) doesn't go full width (image attached).

So the structure is something like this:

<table class="w640">
  <tr>
    <td class="w640">COLUMN 1</td>
    <td class="w640">COLUMN 2</td>
 </tr>
</table>

Then the CSS is:

@media only screen and (max-width: 639px) {
 table[class=w640], 
 td[class=w640] { width:90% !important; display:block !important; }
}

This is what is happening in Gmail. The 2 columns are not going 100% width:

Answer 1

I think your problem might be that you didn't assign a width to your table. You can either give this a static (px) or a flexible (%) width.

Display block on td & tr should do the job for you then. hope that helps you out a bit.

 @media only screen and (max-width: 639px) { tr td { display: block; /*neccasary*/ } } td { background: blue; } table { text-align: center; width: 90%; background: red; margin: 0 auto; } div { background: yellow; width: 400px; /*neccasary if table is given a percentage*/ height: 400px; } 

 <div> <table class="w640"> <tr> <td class="w640">COLUMN 1</td> <td class="w640">COLUMN 2</td> </tr> </table> </div> 

Answer 2

I have what seems to be exactly the same problem and was looking for a solution. I already had a width specified for the table, so it wasn't that.

In the end I used <th> 's instead of the <td> , and now it works!

Hope this helps someone.