You're having a couple problems. One...
<td width='1'><div class='verticaltext'>Test-1
<td width='1'><div class='verticaltext'>Test-12</div></td>
<td width='1'><div class='verticaltext'>Test-123</div></td>
Unless this was just a typo, you're closing the div and the table cells twice for the second and third columns. Start by fixing that.
Two, using the character entities is trying to adjust the columns by manipulating their contents. This is probably the easiest way to approach a cross browser solution, but as you're finding it doesn't give you very fine control over the output. You should include a padding:1em; style rule (or whatever size you want) and/or specify width:5em; if you want each column to be exactly the same width. You'll need to check each browser to make sure they display properly. But if you spend just a little time googling "CSS Box Model" you can achieve much better results and get rid of the table altogether. Using some CSS-P (CSS Positioning) on the three divs is all you really need.
Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe
When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper
Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.