html - HTMLテーブルとCSSでこの奇妙な問題を解決する方法

Question

テーブルのコンテンツに関して奇妙な問題があります

.table {
   position:absolute;
   top:12px;
   left:3px;
   width:87px;
   height:74px;
}

.table tr {
  vertical-align:middle;
}

.table td {
  text-align:center;
  padding:1px;color:#000000;
  font-size:1em;
  line-height:1.5em; 
  width: 50px;
}

.table td span {
  padding:3px 5px;
  font-size:1em;   
  background-color:yellow;
}

HTML

<table class="table" cellpadding="0" cellspacing="0">
 <tbody>
   <tr>
     <td><span>example 1</span>
     </td>
   </tr>
 </tbody>
</table>

中の文字の背景を白にしたいのですが、文字spanの端だけに白背景を広げたくないので、 を適用しpaddingました。

ただし、一部のテキストは背景内にありますが、一部はそうではありません。

for example
some texts are like these...
 -------
|example|
 -------

or 

 --------
| example|
 --------


This is what I want.
 ---------
| example |
 ---------

幅を大きくtd, spanしtrましたが、まだうまく機能していません。