Rectangle displayed only on Outlook email [closed]

Question

We are developing an email which is displayed properly on all the clients browsers. For Outlook we are using ghost tables as here:

<!--[if mso]>
<table width="100%" valign="middle" style="table-layout: fixed; height: 85px; vertical-align: middle; border: none;">
  <tr>
    <td width="45"><img src="xxx" alt="spacer"></td>
    <td width="105" height="85" valign="middle" style="text-align: center; background: #42a846; color: #fff; vertical-align: middle; border: none;"><p style="height: 75px;font-family: 'Roboto',Helvetica,Arial,sans-serif; font-size: 14px; font-weight: bold; color: #FFFFFF; border-radius: 3px; background: #42a846; padding: 35px 3px 0px 3px; text-align: center;">SCONTO <br><span style="font-size:18px">%%=v(@percentualeSconto)=%%%</span></p><p style="font-family: 'Roboto',Helvetica,Arial,sans-serif; font-size: 14px; font-weight: bold; color: #FFFFFF; text-align: center;">CARTA VANTAGGI</p>
</td>
</tr>
<tr><td height="20" style="height: 20px;><img src="xxx" alt="spacer"></td></tr>
</table>
<table align="center" valign="top" role="presentation">
<tr>
   <td height="200" style="white-space: nowrap">
<a href="%%=RedirectTo(@url)=%%" style="text-decoration: none; padding: 0; margin: 0; display: inline-block;"><img src="%%=v(@foto)=%%" alt="Prodotto"></a>
   </td>
</tr>
<tr>
   <td height="80" style="margin:0; valign: top;">
 <p style="font-family: 'Roboto',Helvetica,Arial,sans-serif; font-size: 14px; font-weight: bold; color: #232854; text-align: center; margin:0;">%%=v(@descrizione)=%%</p>
   </td>
</tr>
<tr>
   <td align="center" height="100" width="100%" style="font-size:20px; border-radius: 3px;"><img src="xxx" alt="spacer">
   </td>
</tr>
<tr>
   <td align="top" height="30"><img src="xxx" alt="spacer">
   </td>
</tr>
<tr>
   <td style="white-space: nowrap;>
<a href="%%=RedirectTo(@url)=%%" style="text-decoration: none; padding: 0; margin: 0; display: inline-block;"><p style=" text-decoration: none; font-family:  'Roboto',Helvetica,Arial,sans-serif; font-size: 21px; font-weight: bold; color: #FFFFFF; text-align: center; background-color: #42a846; border: 1px solid transparent; padding: 3px 3px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; line-height: 32px; margin: 0 !important;">%%=v(@prezzoScontato)=%% €</p></a>
   </td>
</tr>
</table>
<![endif]--> 

but the problem is the visualization of these rectangles at the end of the price line.

while we would expecting only this:

Please what could be the problem? Thanks in advance.