Outlook is adding a right margin I don't want - html

Question

I'm testing a html email is... Outlook, and it's adding a bizarre unwanted margin to the right of my tables.
The two tables should line up side-by-side, 200px each in a 400px parent table (which collapses to 200px on mobile).
The first clue to Outlook's behavior is that the tables are no longer side-by-side. And when the text is selected the added margin is clearly showing:
Any ideas at all? Here's my code - as you can see I've tried pretty much everything I can think of!!!
<table width="400" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; margin-right: none; witdh: 200px">
<tr style="border-collapse:collapse; margin-right: none; witdh: 400px">
<td style="border-collapse:collapse; margin-right: none; witdh: 400px">
<table width="200" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; margin-right: none; witdh: 200px;">
<tr style="border-collapse:collapse; margin-right: none; witdh: 200px">
<td style="border-collapse:collapse; margin-right: none; witdh: 200px">Box;</td>
</tr>
</table><table width="200" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; margin-right: none; witdh: 200px;">
<tr style="border-collapse:collapse; margin-right: none; witdh: 200px">
<td style="border-collapse:collapse; margin-right: none; witdh: 200px">Box;</td>
</tr>
</table>
</td>
</tr>
</table>

Answer 1

That's not how tables work in Outlook, I'm sorry!
You need to include all the data in a single table, or wrap a "super table" around your two tables
<table id="supertable">
<tr>
<td width="200">
<!-- Left-hand table goes here -->
<table>
<tr>
<td>Box;</td>
</tr>
<tr>
<td>Box;</td>
</tr>
</table>
</td>
<td width="200">
<!-- Right-hand table goes here -->
<table>
<tr>
<td>Unsubscribe here...</td>
</tr>
<tr>
<td>Change your details here...</td>
</tr>
</table>
</td>
</tr>
When it comes to Outlook HTML (i.e. turn-of-the-century table-bases monstrosity) it's best to sketch your design on graph paper to work out your "grid". Then, you can use the colspan and rowspan attributes of <td>/<tr> elements to lay things out sensibly.

Answer 2

Found a solution! I was having the same problem - I was following the tip for responsive layouts from Campaign Monitor and they do recommend tables side-by-side. Also, form my experience, I can not get to have <td> behave like rows on iOS Mail (works on Mobile Safari, but no longer works when you send it on an email).
Some more googling and I came to a solution: it involves setting borders and wrapping the content of the <td> on a <p>tag. Check step 3. It works!