why two table in one row not working in html email template for outlook?

Question

I am creating a responsive email template and used two table in one row for mobile view it can adjust one table in one row and next table for second row It is working for all email platform like, Gmail, Yahoo, GMX, AOL, mail.com, but not working on outlook. What should I do?

Here is my code:

<tr>
    <td align="center" bgcolor="#a90209" style="text-align:center; padding:0px;">
        <table align="left" cellpadding="0" cellspacing="0" border="0" width="50%" style="float:left; text-align:left !important" class="responsive-table-block">
            <tbody>
                <tr>
                    <td class="footer" style="text-align:right !important" style="padding:0;">
                        <a href="#">
                            <img src="logo" alt="" />
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>

        <table align="right" cellpadding="0" cellspacing="0" border="0" width="50%" style="float:right; text-align:right !important;" class="responsive-table-block">
            <tbody>
                <tr>
                    <td class="footer" style="padding:0; text-decoration:none; text-align:right !important" class="full">
                        <a href="#" target="_blank">
                            <img src="social-icon" alt="" />
                        </a>
                        <a href="#" target="_blank">    
                            <img src="social-icon" alt="" />
                        </a>
                        <a href="#" target="_blank">    
                            <img src="social-icon" alt="" />
                        </a>
                        <a href="#" target="_blank">    
                            <img src="social-icon" alt="" />
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

Answer 1

Outlook have a bug that adds width to tables.. so you 2 x table:width 50%, becomes 51% each, then they break... The best solution, is to make them smaller then 50%.

Found some other errors aswell.. eg.

<td class="footer" style="padding:0; text-decoration:none; text-align:right !important" class="full">

Dont have class twice. The same with this, dont have style, twice.

 <td class="footer" style="text-align:right !important" style="padding:0;">

The final code

<tr>
    <td align="center" bgcolor="#a90209" style="text-align:center; padding:0px;">
        <table align="left" cellpadding="0" cellspacing="0" border="0" width="49%" style="float:left; text-align:left !important" class="responsive-table-block">
            <tbody>
                <tr>
                    <td class="footer" style="text-align:right !important; padding:0;">
                        <a href="#">
                            <img src="logo" alt="" />
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>

        <table align="right" cellpadding="0" cellspacing="0" border="0" width="48%" style="float:right; text-align:right !important;" class="responsive-table-block">
            <tbody>
                <tr>
                    <td class="footer full" style="padding:0; text-decoration:none; text-align:right !important">
                        <a href="#" target="_blank">
                            <img src="social-icon" alt="" />
                        </a>
                        <a href="#" target="_blank">    
                            <img src="social-icon" alt="" />
                        </a>
                        <a href="#" target="_blank">    
                            <img src="social-icon" alt="" />
                        </a>
                        <a href="#" target="_blank">    
                            <img src="social-icon" alt="" />
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

Answer 2

Outlook surely has as lot of bugs. My suggesstion would be to add a ghost column between the two tables.

<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="50%">
<![endif]--> 

Ghost tables or columns will be read by specified outlook (gte mso 9: greater than microsoft outlook 2000) or IE only. After adding the ghost column your code should look something similar to this:

<tr>
    <td align="center" bgcolor="#a90209" style="text-align:center; padding:0px;">
        <table align="left" cellpadding="0" cellspacing="0" border="0" width="50%" style="float:left; text-align:left !important" class="responsive-table-block">
            <tbody>
                <tr>
                    <td class="footer" style="text-align:right !important" style="padding:0;">
                        <a href="#">
                            <img src="logo" alt="" />
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>

<!-- ghost table -->
<!--[if (gte mso 9)|(IE)]>
    </td><td align="left" valign="top" width="50%">
<![endif]--> 
    
    
        <table align="right" cellpadding="0" cellspacing="0" border="0" width="50%" style="float:right; text-align:right !important;" class="responsive-table-block">
            <tbody>
                <tr>
                    <td class="footer" style="padding:0; text-decoration:none; text-align:right !important" class="full">
                        <a href="#" target="_blank">
                            <img src="social-icon" alt="" />
                        </a>
                        <a href="#" target="_blank">    
                            <img src="social-icon" alt="" />
                        </a>
                        <a href="#" target="_blank">    
                            <img src="social-icon" alt="" />
                        </a>
                        <a href="#" target="_blank">    
                            <img src="social-icon" alt="" />
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

Cheers