Q:

HTML Table CSS generates differently in browser than in Email

I'm trying to stylize an HTML table with some directly in the HTML - (I know it's bad practice, I don't have the option of a .css file to work with), as I'm doing it directly in the body of an email. I'm having trouble with getting a gradient background image to properly work. When I work with the table in a JSFiddle, the gradient background of the table works just fine:
https://jsfiddle.net/wqs5vynt/
However, the rest of the formatting of the table is off in the JSfiddle - the <th> cells' font isn't white, the table's content cells shouldn't be grey. And there shouldn't be an outlined border.
However, when the exact same HTML is sent through an email, the table turns out like this. 

It looks exactly as I want it to, except the repeating gradient in each <th> cell, I want just one long gradient background image across all the cells for that row. That's the only thing I need fixed, any suggestions?

A:

Working with emails is not a fun experience.  You basically need to take everything you know about web standards and throw it out the window.  With that said, CSS gradients are not going to work in every email client.
I would recommend using an image for your table headings/gradient.  Or simplify the design and just use a solid color.
Edit: As mentioned, do not apply the color to the tr, only apply it to th or td.

