I am working on a responsive template for a welcome campaign and am having some trouble getting it to display correctly in desktop clients. I feel like I am making too hard a work of this as it seems like it shouldn't be as difficult as I'm making it. Here are the test results from the latest version:

https://litmus.com/pub/1f0f4ae/screenshots

As you can see it breaks in most desktop clients here is the markup I am using for the responsive bits:

<table bgcolor="#f5f5f5" align="left" cellpadding="0" cellspacing="0" border="0" style="width: 100px; background-color: #f5f5f5; margin-top: 3px; margin-left: 3px; margin-right: auto; border-collapse: collapse; border-spacing: 0;">
                            <tr>
                                <td style="padding: 10px 10px 10px 10px;">
                                    <a target="_blank" href="https://www.facebook.com/RealTruck"><img src="http://www.realtruck.com/newsletters/template/facebook-icon.png" width="220" height="220" alt="Facebook" border="0" style="display: block;"></a>
                                </td>
                            </tr>
                        </table>
                        <table class="switch" bgcolor="#f5f5f5" width="120" height="240" align="left" cellpadding="0" cellspacing="0" border="0" style="background-color: #f5f5f5; margin-top: 3px; margin-left: 3px; margin-right: auto; border-collapse: collapse; border-spacing: 0; float: left;">
                            <tr>
                                <td style="padding: 10px 10px 10px 10px;">
                                    <a target="_blank" href="https://twitter.com/RealTruck"><img src="http://www.realtruck.com/newsletters/template/twitter-icon.png" width="100" height="100" alt="Twitter" border="0" style="display: block; margin-bottom: 10px;" align="left"></a>
                                    <a target="_blank" href="https://plus.google.com/u/0/b/109617870829116183061/109617870829116183061/posts"><img src="http://www.realtruck.com/newsletters/template/google-plus-icon.png" width="100" height="100" alt="Google+" border="0" style="display: block;" align="left"></a>
                                </td>
                            </tr>
                        </table>

There is also some media queries at work here but I don't think they are at play in the affected mail clients. I could be wrong though:
Full code here:
http://www.realtruck.com/newsletters/share/welcome-social.html