css - How to use media query to change cell padding at specific resolution? -

when viewed in desktop view (> 480px) need particular <td> have left-padding of 9px but, when resolution drops below 480px, need left-padding increase 18px.

currently, padding definition inline:

@media screen , (max-width: 480px){  		td[class=paddingcontrol]{  			padding-left:18px !important;  		}

<table>    <td style="padding-top:0px; padding-left:9px; padding-bottom:9px; padding-right:18px;" class="paddingcontrol">      data here    </td>  </table>

unfortunately, doesn't seem working. ideas?

many thanks!

after having run code in email testing application; realized worked perfectly. lesson learnt: test in email format; not within browser.

as mentioned gortonington, "there many differences between email client preprocessors , different browser processors impossible judge if works on single preview or test".