max-width not working in html email when Gmail is accessed from mobile browser?

I'm trying to have a column with a width of 600px and a max-width of 100%

<table style="width:600px;max-width:100%" id="my-table">
    <tbody>
        <tr>
            <td> </td>
            <td > <img style="width:600px;max-width:100%"> </td>
            <td> </td>
        </tr>
    </tbody>
</table>

I tried this in gmail in Samsung Internet and in Firefox, and in both cases it's showing a width bigger than the screen. I also tried adding

<style>                              
@media screen and (max-width:500px) {
    table {
        max-width: 350px !important;
    }
}

</style>

but it does not work either. It does work on the Gmail app though

Here is what I use and it works on Gmail mobile. Please try it.

@media only screen and (max-width: 599px) {
.email-container {
    width: 100%!important;
}
.pattern {
    width: 100% !important;
    margin: auto !important;
}
img.pattern {
    max-width: 100% !important;
    height: auto !important;
}
}

  <table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
    <tr>
      <td align="center" valign="top" width="100%"><table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;" class="email-container">
          
          <!-- Header Image -->
          <tr>
            <td><table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                <tr>
                  <td align="center" valign="top"><img class="pattern" src="http://fpoimg.com/1200x600?text=Preview" width="600" alt="img" border="0" style="display:block;width:600px;max-width:600px;height:auto;"/></a></td>
                </tr>
              </table></td>
          </tr>
          <!-- End Header Image -->
          
        </table></td>
    </tr>
  </tbody>
</table>