Custom webreport loosing odd even row color

I have custom report where I am trying to implement formatting using below style code, everything is fine but when report come in form of html based email its not showing color of odd/even row however if I am looking at preview or testing it somewhere then its showing color no problem in there not sure why its not coming in outlook email.

Any suggestions pls.

a { text-decoration: none; } 

a:link { color: #200772; font-weight: normal; text-decoration: none; } 

a:hover { color: #FF8000; font-weight: normal; text-decoration: none; } 

table { margin: 0; border-collapse: collapse; color: #0d0c0c; font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; }

th { font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; color: #f7f9fa; font-weight: normal; background-color: #0a1ef7; border: 1px solid #cccccc; margin: 0; padding: 4px 10px 4px 5px; text-align: left; } 

td { color: #0d0c0c; font: 8pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; border-bottom: 1px solid #cccccc; margin: 0; /* padding: 6px 20px 1px 0; */ padding: 8px 20px 5px 5px; }

td.userinput { color: #0d0c0c; font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-weight: bold; border-bottom: 0px; margin: 0; padding: 6px 20px 1px 0; } 

td.errormsg { color: red; font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-weight: bold; border-bottom: 0px; margin: 0; padding: 6px 20px 1px 0; } 

td.msg { color: #747170; font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-weight: bold; border-bottom: 0px; margin: 0; padding: 6px 20px 1px 0; } 

/*#t01*/ tr:nth-child(even) {background-color: #eee;}

/*#t01*/ tr:nth-child(odd) {background-color: #fff;}

Microsoft doesn’t have great track record with rendering html correctly.

When you use web reports do you use Internet Explorer and does it render correctly?

If so, the problem is likely to be with Outlook. Try the option to view the page in the browser, although that is likely to use IE, at least that does make a better job of rendering html than Outlook.

Yes, I tested this on chrome, IE 11 & MS Edge chromium formatting is showing properly.

Yes its with Outlook only, when I am looking into outlook email source its converting & putting some compatibility adjustment with IE 8. There is no other option than viewing in outlook email as report is scheduled & being sent on outlook.

below is the email header for outlook BigFix report.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=8">

I tried adding below in custom report code, thinking it might help but ultimately its picking whatever outlook has set on top of my custom report source.

<meta http-equiv="X-UA-Compatible" content="IE=edge">