Hi there! I'm working on an e-mail for a client and I have a few problems. First of, I use stacked tables to get a two column effect on desktop, but to get a stacked effect on mobile. The thing is, on desktop in Outlook 2007, 2010 & 2013 it seems like the right table gets wider or extra padding and the alignment gets screwed up. Here's a snippet from the code:

<tr>
        <td bgcolor="#FFFFFF"><table border="0" cellspacing="0" cellpadding="0" width="100%">
              <tr>
                <td style="padding-left: 50px; padding-right: 50px;"><table border="0" cellspacing="0" cellpadding="0" width="250" align="left" class="kol">
                    <tr>
                      <td><table border="0" cellspacing="0" cellpadding="0" width="215" align="left">
                          <tr>
                            <td align="center"><a href="#" target="_blank"><img src="images/product-l-1.jpg" width="190" height="231" border="0"></a></td>
                          </tr>
                          <tr>
                            <td height="10" bgcolor="#FFFFFF" style="font-size: 10px; line-height: 10px;">&nbsp;</td>
                          </tr>
                          <tr>
                            <td height="82" valign="top"><table border="0" cellspacing="0" cellpadding="0" align="left" width="100">
                                <tr>
                                  <td align="center"><img src="images/pricetag-2.jpg" width="76" height="43" border="0"></td>
                                </tr>
                                <tr>
                                  <td height="10" bgcolor="#FFFFFF" style="font-size: 10px; line-height: 10px;">&nbsp;</td>
                                </tr>
                                <tr>
                                  <td align="center"><img src="images/productlogo.jpg" width="75" height="12" border="0"></td>
                                </tr>
                              </table>
                              <table border="0" cellspacing="0" cellpadding="0" align="right" width="97">
                                <tr>
                                  <td align="left" valign="top"><img src="images/stars-1.jpg" width="73" height="12" border="0"></td>
                                </tr>
                                <tr>
                                  <td height="5" bgcolor="#FFFFFF" style="font-size: 5px; line-height: 5px;">&nbsp;</td>
                                </tr>
                                <tr>
                                  <td align="left" style="font-family: Arial, Arial, Helvetica, sans-serif; font-size: 9px; color: #464646; line-height: 12px; text-transform: uppercase;">Ekiden Trail Active</td>
                                </tr>
                                <tr>
                                  <td height="5" bgcolor="#FFFFFF" style="font-size: 5px; line-height: 5px;">&nbsp;</td>
                                </tr>
                                <tr>
                                  <td><table border="0" cellspacing="0" cellpadding="0">
                                      <tr>
                                        <td align="left" style="font-family: Arial, Arial, Helvetica, sans-serif; font-size: 13px; color: #464646; line-height: 16px; padding-right: 4px">&bull;</td>
                                        <td align="left" style="font-family: Arial, Arial, Helvetica, sans-serif; font-size: 13px; color: #464646; line-height: 16px; text-transform: uppercase;">Accroche</td>
                                      </tr>
                                      <tr>
                                        <td align="left" style="font-family: Arial, Arial, Helvetica, sans-serif; font-size: 13px; color: #464646; line-height: 16px; padding-right: 4px">&bull;</td>
                                        <td align="left" style="font-family: Arial, Arial, Helvetica, sans-serif; font-size: 13px; color: #464646; line-height: 16px; text-transform: uppercase;">maintien</td>
                                      </tr>
                                      <tr>
                                        <td align="left" style="font-family: Arial, Arial, Helvetica, sans-serif; font-size: 13px; color: #464646; line-height: 16px; padding-right: 4px">&bull;</td>
                                        <td align="left" style="font-family: Arial, Arial, Helvetica, sans-serif; font-size: 13px; color: #464646; line-height: 16px; text-transform: uppercase;">confort</td>
                                      </tr>
                                    </table></td>
                                </tr>
                              </table></td>
                          </tr>
                          <tr>
                            <td height="15" bgcolor="#FFFFFF" style="font-size: 15px; line-height: 15px;">&nbsp;</td>
                          </tr>
                          <!-- BUTTON START -->
                          <tr>
                            <td align="center" bgcolor="#FFFFFF"><a href="#" target="_blank"><img src="http://preview.prox.to/decathlon/85139390_EmailsResponsiveOpknippen/images/button.jpg" width="162" alt="Je découvre" height="33" border="0"></a></td>
                          </tr>
                          <!-- BUTTON END -->
                        </table></td>
                      <td width="1" height="auto" bgcolor="#e4e4e4" class="td-reset" align="right"></td>
                    </tr>
                  </table>

                  <!-- > THIS BIT IS THE KICKER < whack in a column if Outlook --> 
                  <!--[if mso]></td><td><![endif]--> 
                  <!-- Brilliant. -->

                  <table border="0" cellspacing="0" cellpadding="0" width="215" align="right" class="kolumn">
                    <tr>
                      <td align="center"><a href="#" target="_blank"><img src="http://preview.prox.to/decathlon/85139390_EmailsResponsiveOpknippen/images/product-l-2.jpg" width="184" height="231" border="0"></a></td>
                    </tr>
                    <tr>
                      <td height="10" bgcolor="#FFFFFF" style="font-size: 10px; line-height: 10px;">&nbsp;</td>
                    </tr>
                    <tr>
                      <td height="82" valign="top"><table border="0" cellspacing="0" cellpadding="0" align="left" width="100">
                          <tr>
                            <td align="center"><img src="http://preview.prox.to/decathlon/85139390_EmailsResponsiveOpknippen/images/pricetag-1.jpg" width="79" height="43" border="0"></td>
                          </tr>
                          <tr>
                            <td height="10" bgcolor="#FFFFFF" style="font-size: 10px; line-height: 10px;">&nbsp;</td>
                          </tr>
                          <tr>
                            <td align="center"><img src="http://preview.prox.to/decathlon/85139390_EmailsResponsiveOpknippen/images/productlogo.jpg" width="75" height="12" border="0"></td>
                          </tr>
                        </table>
                        <table border="0" cellspacing="0" cellpadding="0" align="right" width="97">
                          <tr>
                            <td align="left" valign="top"><img src="http://preview.prox.to/decathlon/85139390_EmailsResponsiveOpknippen/images/stars-2.jpg" width="73" height="13" border="0"></td>
                          </tr>
                          <tr>
                            <td height="5" bgcolor="#FFFFFF" style="font-size: 5px; line-height: 5px;">&nbsp;</td>
                          </tr>
                          <tr>
                            <td align="left" style="font-family: Arial, Arial, Helvetica, sans-serif; font-size: 9px; color: #464646; line-height: 12px; text-transform: uppercase;">Tee Shirt Kiprun Trail</td>
                          </tr>
                          <tr>
                            <td height="5" bgcolor="#FFFFFF" style="font-size: 5px; line-height: 5px;">&nbsp;</td>
                          </tr>
                          <tr>
                            <td><table border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td align="left" style="font-family: Arial, Arial, Helvetica, sans-serif; font-size: 13px; color: #464646; line-height: 16px; padding-right: 4px">&bull;</td>
                                  <td align="left" style="font-family: Arial, Arial, Helvetica, sans-serif; font-size: 13px; color: #464646; line-height: 16px; text-transform: uppercase;">Ventilation</td>
                                </tr>
                                <tr>
                                  <td align="left" style="font-family: Arial, Arial, Helvetica, sans-serif; font-size: 13px; color: #464646; line-height: 16px; padding-right: 4px">&bull;</td>
                                  <td align="left" style="font-family: Arial, Arial, Helvetica, sans-serif; font-size: 13px; color: #464646; line-height: 16px; text-transform: uppercase;">visibilité</td>
                                </tr>
                              </table></td>
                          </tr>
                        </table></td>
                    </tr>
                    <!-- BUTTON START -->
                    <tr>
                      <td height="15" bgcolor="#FFFFFF" style="font-size: 15px; line-height: 15px;">&nbsp;</td>
                    </tr>
                    <tr>
                      <td align="center" bgcolor="#FFFFFF"><a href="#" target="_blank"><img src="images/button.jpg" width="162" alt="Je découvre" height="33" border="0"></a></td>
                    </tr>
                  </table></td>
              </tr>
            </table></td>
        </tr>

And the specific css that's used in this part:
> table[class="kol"] {
    display: block !important;
    width: 100% !important;
}