table header responsive

by Vaishali Kapadia

HTML

<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f3f3f3;">
    <tr>
        <td style="text-align: center; vertical-align: top;">
            <!-- HEADER -->
            <table align="center" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; " class="header">
                <tr>
                     <!-- Logo -->
                     <td align="left" style="display: inline-block; padding: 5px;" class="logo">
                         <a href="#">
                            <img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
                         </a>
                     </td>
                     <!-- Logo -->
                     <td align="right" style="display: inline-block; padding: 5px;" class="logo">
                         <a href="#">
                            <img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
                         </a>
                     </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS

.logo:first-child
{
background: red;
}
.logo:last-child
{
background: blue;
}
img{
width:100%;
}
@media screen and (max-width: 640px) {
.header{
width:100%;
}
.logo{
width:100%;

}
}