title: HTML email - GMAIL display block doesn't work properly
body: <p>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. </p>
  
  <p>This is working in other clients as expected, but in Gmail, the column (td) doesn't go full width (image attached). </p>
  
  <p>So the structure is something like this:</p>
  
  <pre><code>&lt;table class="w640"&gt;
    &lt;tr&gt;
      &lt;td class="w640"&gt;COLUMN 1&lt;/td&gt;
      &lt;td class="w640"&gt;COLUMN 2&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Then the CSS is:</p>
  
  <pre><code>@media only screen and (max-width: 639px) {
   table[class=w640], 
   td[class=w640] { width:90% !important; display:block !important; }
  }
  </code></pre>
  
  <p>This is what is happening in Gmail. The 2 columns are not going 100% width: <a href="https://i.stack.imgur.com/Tz5ya.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tz5ya.jpg" alt="enter image description here"></a></p>