I have a table built but the image slices will not align on a mobile view, instead there is a 1 px gap at the top & bottom of the middle <tr>. I have checked my math to make sure each image slice adds up to the correct width of 640px.

Any suggestions on how to get rid of the gap between slices?


<table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" align="center">
        <tr>
          <td width="640">                              
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
               <tr>
                  <td colspan="3" style="border-top:3px solid #ab152b;"><img src="FR_room_top.jpg" width="640" height="193" style="width:100%; max-width:640px; height:auto; display:block;" border="0" alt="Make your home perfect with these speial offers."></td>
               </tr>
                <tr>
                  <td><img src="FR_handL.jpg" alt="" width="195" height="187" style="width:100%; max-width:195px; height:auto; display:block;" border="0"></td>
                   <td><img src="FR_animation_tablet.gif" alt="" width="248" height="187" style="width:100%; max-width:248px; height:auto; display:block;" border="0"></td>
                    <td><img src="FR_handR.jpg" alt="" width="192" height="187" style="width:100%; max-width:197px; height:auto; display:block;" border="0"></td>
               </tr>
                <tr>
                  <td colspan="3"><img src="FR_room_bottom.jpg" width="640" height="56" style="width:100%; max-width:640px; height:auto; display:block;" border="0" alt=""></td>
               </tr>
            </table>
            </td>
            </tr>
            </table>