Why Is Gmail Blocking CSS in Emails

Why is Gmail blocking CSS in emails?

Gmail doesn't block CSS totally. It still supports inline style. Why doesnt it support style block, I've no idea. To have a good overview of CSS support in various webmail and email clients, here's a good one. http://www.campaignmonitor.com/css/

Gmail blocking inline css properties

You can style email sent to Gmail using inline blocks and standard CSS. Most CSS selectors, attributes, and media-queries are supported. Unsupported CSS properties and selectors may be ignored by Gmail.

See the reference guide for a complete list of supported CSS properties and queries.

Example

<html>
  <head>
    <style>
      .colored {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
      @media screen and (min-width: 500px) {
        .colored {
          color:red;
        }
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Hi Pierce,</p>
      <p class='colored'>
        This text is blue if the window width is
        below 500px and red otherwise.
      </p>
      <p>Jerry</p>
    </div>
  </body>
</html>

See also: a complete breakdown of the CSS support for the most popular mobile, web and desktop email clients on the planet (from Campaign Monitor).

Gmail - HTML classes and style tags are removed inside table

There are different versions of Gmail, but yes it is common to see it strip embedded CSS. You must refactor your code to inline the styles. See HTML email in Gmail - CSS style attribute removed Why is Gmail blocking CSS in emails? or Styles not working in Gmail

HTML formatted email not showing up at all in Gmail but is in other mail clients

I am updating my answer since it has quite a few views, and new tools are available. I am leaving my original answer for posterity.

Edit * 9/19/19

You can find CSS property support by email client here:
https://www.caniemail.com/

Original Answer:

Gmail does not support the <style> tag. You need to use inline css for gmail to work correctly.

Here's a reference list.
http://www.campaignmonitor.com/css/

HTML email - GMAIL display block doesn't work properly

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>

Styling HTML email for Gmail

The answers here are outdated, as of today Sep 30 2016. Gmail is currently rolling out support for the style tag in the head, as well as media queries. If Gmail is your only concern, you're safe to use classes like a modern developer!

For reference, you can check the official gmail CSS docs.

As a side note, Gmail was the only major client that didn't support style (reference, until they update anyway). That means you can almost safely stop putting styles inline. Some of the more obscure clients may still need them.

Why Is Gmail Blocking CSS in Emails