I have a very specific question/html puzzle targeted to Outlook, which strips out all media queries. I've been able to "mimick" responsive behavior with 3 left aligned tables that drop down upon each other on a smaller mobile display, but they are now all left aligned on a mobile display with lots of white space to the right of the 3 tables. It looks awful. I've tried using different padding strategies, different combinations of percentages/fixed table widths, sung em padding strategies (which seem to exaggerate the padding on the phone a bit and nudge it over a bit), cannot use float; this is one puzzle I cannot crack! With out device detection to change code, can anyone think of a straight html solution for left aligned tables, when they drop down on a mobile display, will come close to centered? My challenge, it's driving me nuts! There has to be a solution or a workaround.

The 3 tables are as follows:

<!-- PageContent ROW section structure -->
<tr class="content-section">
<!-- centered td creates the page background -->
<td valign="top" align="center">
<!-- unsized table with td sized at 640 defines the page content area -->
<table border="0" cellspacing="0" cellpadding="0" style="display: block; margin: 0 auto; border-collapse: collapse; background-color: #ffffff; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td width="640" valign="top" style="width: 640px; padding: 0; margin: 0; background-color: #ffffff">

<!-- **** 3-Column CONTENT Table **** -->
<!--{PageContent Table}-->
<!-- 100% table with left aligned inside tables creates responsive structure -->
<!--{PageSection}-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; border: 0; padding: 0; margin: 0; border-collapse: collapse; background-color: #ffffff; font-size: 0; font-family: 'Segoe UI'; font-weight: normal; font-style: normal; line-height: 0; color: #505050; text-align: left; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td valign="top" style="border: 0; padding: 0 0 24px 0; margin: 0;">

<table align="left" width="205" border="0" cellspacing="0" cellpadding="0" style="width: 205px; border: 0; padding: 0; margin: 0; background-color: #ffffff; font-size: 9pt; font-family: 'Segoe UI'; font-weight: normal; font-style: normal; line-height: normal; color: #505050; text-align: left; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>

<td width="100%" align="left" valign="top" style="width:100%; border: 0; padding: 24px 0 0 24px; margin: 0;">

<p style="margin: 0 0 8px 0;">

<img style="display: block;" border="0" src="http://via.placeholder.com/181x130" alt="181x130Image" width="181" height="130" />

</p>
<p style="font-size: 11.5pt; margin: 0 0 7px 0;">
Subheads organize
</p>
<p style="margin: 0; font-size: 9pt;">
Body copy is used for large amounts of information and reading in detail. The body copy should always legible by following the Microsoft accessibility standards. Body copy is used for large amounts of information.

<a href="http://www.microsoft.com" style="text-decoration: none;"><span style="color: #0078D7;">Learn more</span></a>
</p>

</td>
</tr>

</table>

<table align="left" width="205" border="0" cellspacing="0" cellpadding="0" style="width: 205px; border: 0; padding: 0; margin: 0; background-color: #ffffff; font-size: 9pt; font-family: 'Segoe UI'; font-weight: normal; font-style: normal; line-height: normal; color: #505050; text-align: left; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>

<td width="100%" align="left" valign="top" style="width:100%; border: 0; padding: 24px 0 0 24px; margin: 0;">

<p style="margin: 0 0 8px 0;">

<img style="display: block;" border="0" src="http://via.placeholder.com/181x130" alt="181x130Image" width="181" height="130" />

</p>
<p style="font-size: 11.5pt; margin: 0 0 7px 0;">
Subheads organize
</p>
<p style="margin: 0; font-size: 9pt;">
Body copy is used for large amounts of information and reading in detail. The body copy should always legible by following the Microsoft accessibility standards. Body copy is used for large amounts of information.

<a href="http://www.microsoft.com" style="text-decoration: none;"><span style="color: #0078D7;">Learn more</span></a>
</p>

</td>
</tr>

</table>

<table align="left" width="205" border="0" cellspacing="0" cellpadding="0" style="width: 205px; border: 0; padding: 0; margin: 0; background-color: #ffffff; font-size: 9pt; font-family: 'Segoe UI'; font-weight: normal; font-style: normal; line-height: normal; color: #505050; text-align: left; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>

<td width="100%" align="left" valign="top" style="width:100%; border: 0; padding: 24px 0 0 24px; margin: 0;">

<p style="margin: 0 0 8px 0;">

<img style="display: block;" border="0" src="http://via.placeholder.com/181x130" alt="181x130Image" width="181" height="130" />

</p>
<p style="font-size: 11.5pt; margin: 0 0 7px 0;">
Subheads organize
</p>
<p style="margin: 0; font-size: 9pt;">
Body copy is used for large amounts of information and reading in detail. The body copy should always legible by following the Microsoft accessibility standards. Body copy is used for large amounts of information.

<a href="http://www.microsoft.com" style="text-decoration: none;"><span style="color: #0078D7;">Learn more</span></a>
</p>

</td>
</tr>

</table>

</td>
</tr>
</table>
<!-- END*3C Table -->
</td>
</tr>
</table>
</td>
</tr>
<!-- END*PageContentRow -->