Table cells not aligned horizontal

Hello, I have tried few plugins for creating tables, but I did not find what I wanted, so I decided to create the table without the help of any plugin. The table is displayed correctly in Chrome and in Opera, but not in I.E. and Mozilla. The problem is that cells are not aligned horizontal and they look like some stairs. First is ok, but in the second and in the third one, the text and the horizontal line are down few pixels, compared with the one before them. If you have some suggestions, please do not hesitate to write them. I had written the code bellow. Thanks in advance.

<div style=”white-space: pre; overflow: auto; width: 100%; padding: none;”>
<table style=”width: 100%;”>
<tbody>
<hr style=”border: none; border-bottom: 1px solid; color: #000000;” />
<tr>
<td style=”border: none; border-bottom: 1px solid; color: #000000; padding: 14px; width: 50%; float: left;”> <span style=”color: #1F618D; font-size: 15px;”> Text 1</span></td>
<td style=”border: none; border-bottom: 1px solid; color: #000000; padding: 14px; width: 38%; float: left;”> <span style=”color: #1F618D; font-size: 15px;”> Text 2</span></td>
<td style=”border: none; border-bottom: 1px solid; color: #000000; padding: 14px; width: 12%; float: left;”><span style=”color: #1F618D; font-size: 15px;”> Text 3</span></td>
</tr>
/* The table has eight rows, but the codes are the same */
</tbody>
</table>
</div>