How do I get an image to fill a table cell's width in Outlook?

Question

I'm trying to build the html for an email. In my browser Outlook client (and Gmail client) it renders like this, which is good

In my O365 Outlook desktop app, it renders like this, with an unwanted margin at the right, which is bad, and the wrong colours (which I think I can fix):

Here's my code (it's actually a template, hence the {banner}):

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td></td>
        <td width="700px" style="padding: 0; margin: 0;">
            <div style="border: 1px solid red; padding: 0; margin: 0; background: #404040; color: white; width: 100%;">
                <table width="100%" style="border: 1px solid red; border-spacing: 0;">
                    <tr>
                        <td colspan="4" style="border: 1px solid red; padding: 0;"><img src="{Banner}" style="margin-bottom: 0; width: 100%;"/></td>
                    </tr>
                    <tr>
                        <td colspan="2" style="border: 1px solid red; padding: 0; width: 50%; background: ">should be left-aligned with image</td>
                        <td colspan="2" style="border: 1px solid red; padding: 0; width: 50%; text-align: right;">should be right-aligned with image</td>
                    </tr>
                </table>
            </div>
        </td>
        <td></td>
    </tr>

Answer 1

If you wrap your entire table in a 100% width and then a second table inside with the table width set to 800 like below, this will remove your whitespace on the right.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
       <td>
          <table width="800" border="0" cellspacing="0" cellpadding="0">
             <tr>
                <td></td>
                <td width="700" style="padding: 0; margin: 0;">
                   <div style="border: 1px solid red; padding: 0; margin: 0; background: #404040; color: white; width: 100%;">
                      <table width="100%" style="border: 1px solid red; border-spacing: 0;">
                         <tr>
                            <td colspan="4" style="border: 1px solid red; padding: 0;"><img src="..." style="margin-bottom: 0; width: 100%;"/></td>
                         </tr>
                         <tr>
                            <td colspan="2" style="border: 1px solid red; padding: 0; width: 50%; background: ">should be left-aligned with image</td>
                            <td colspan="2" style="border: 1px solid red; padding: 0; width: 50%; text-align: right;">should be right-aligned with image</td>
                         </tr>
                      </table>
                   </div>
                </td>
                <td></td>
             </tr>
          </table>
       </td>
    </tr>
</table>