Media query responsive table design not responding to mobile - html

Question

I expect each table row to fill to a maximum of 600px, but a table row to be 100% of the screen width when the viewport is less than 600px. There seems to be no response in Chrome Developer Tools given a small viewport. Why?
<style>
#media only screen and (max-width: 600px) {
table,tr,td {
width:100%;
margin:0 0;
}
}
</style>
<table style="max-width:600px;margin:0 auto;width:100%" align="center">
<tr class="test">
<td style="background-color:red;text-align:center" class="test">
To view this email as a web page, click here.
</td>
</tr>
<tr class="test">
<td style="background-color:blue;text-align:left" class="test">
test2
</td>
</tr>
<tr class="test">
<td class="test">
<div>
<img src="http://image.exct.net/lib/fec315777067017a/m/1/share_twitter.jpg" align="right">
<img src="http://image.exct.net/lib/fec315777067017a/m/1/share_facebook.gif" align="right">
</div>
</td>
</tr>
</table>
--Update--
The code above works on Outlook Mobile, works when resizing Chrome window to less than 600px, works in FireFox on resize and in developer mode, works in IE on resize, but does not work in Chrome Developer Console with an emulated device less than 600px wide, and does not work on my Android Nexus 6.

Answer 1

Adding tag
<meta name="viewport" content="width=device-width, initial-scale=1">
resolves this issue.

Answer 2

When you're using inline styles like:
<table style="max-width:600px;margin:0 auto;width:100%" align="center">
In your HTML you're going to have to override it by adding !important to your css.
Here's your code working in JSfiddle. The only thing that I changed was adding that !important tag to your css!
https://jsfiddle.net/pLtb28a1/
Keep in mind that the only way to override a tag with the !important flag on it is to use another !important flag on your override. They can make things a little tricky if you forget you are using them.