Hello World!
Question: Is it possible for elements with a display style of table-header-group or table-footer-group maintain a self supportive true 100% width?

In this example, as the media query is triggered, I am using CSS display properties to rearrange the table elements. More specifically, table-header-group will stack the right column above the left column. However, once stacked in this scenario, the two columns/containers do not retain 100% width, related to the parent tag.

    @media only screen and (max-width: 640px) { 

    *[class].block  { display:block !important; } 
    *[class].up    { display:table-header-group !important; }
    *[class].down  { display:table-footer-group !important; }
    *[class].m320 { width:100% !important; min-width:320px !important; }
    *[class].w100p { width:100% !important; }
    *[class].w80p { width:80% !important; }
    *[class].w20p { width:20% !important; }
    }

    <table width="640" cellspacing="0" cellpadding="0" align="center" border="0" class="w100p">
    <tr>
    <td width="320" align="center" valign="top" bgcolor="#00ff33" class="w80p down"><img style="display:block;" src="http://placekitten.com/g/60/50" /></td>
    <td width="320" align="center" valign="top" bgcolor="#e5e5e5" class="w20p up"><img style="display:block;" src="http://placekitten.com/g/50/50" /></td>
    </tr>
    </table>

Thank You World!