Rahmen um einzelnes Zeichen innerhalb table will nicht gelingen

[css noob]

Hallo Gemeinde,

wer kann mir helfen? Bin am verzweifeln. Eine relativ simple Aufgabenstellung sollte man meinen.
Mir reicht auch wenn das ganze im ie und firefox funktioniert.

Ein kleines eingerahmtes Plus Symbol und daneben ein kleiner Text...

Einzige Bedingung: Ich kann die table aussen nicht weglassen und vernünftigerweise durch ein <div> ersetzen, sonst müsste ich alles umbauen was schon da ist....

Es will mir nicht gelingen.

Hier mein letzter Versuch, der zumindest im firefox schon annähernd funktioniert hat, aber bei weitem nicht pixelgenau war:

  
<table>  
 <tr style='display:table-row; vertical-align: middle; text-align:center; border:1px solid red;'>  
  <td style='cursor:pointer; vertical-align: middle; text-align:center;'>  
   <div style='border: 1px solid black; height: 10px; width:10px; float:left; text-align: center; vertical-align: middle;overflow: hidden;'>  
    <div style='line-height: 10px; height: 10px; left: clear;'>+</div>  
   </div>  
   <div style='float:left; text-align: center; vertical-align: middle; margin-left: 5px;'>Text</div>  
  </td>  
 </tr>  
</table>  

Wie bekomme ich das "<div>" und innerhalb des divs das "+" in die Mitte.
Und das auch beim IE.

Wäre super wenn jemand Rat hat.

Danke und Grüße der Verzweifelte