How to solve this weird issue in html table and css

Question

I have a weird issue regarding my table content

.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>

I want the text inside span have a white background, but I don't want the white background extend to only the edge of the texts, so I applied padding.

However, some of the texts are inside the background, but some of them are not.

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

or 

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


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

I have give td, span and tr larger width but it still not working well.

Answer 1

Setting display: inline-block; on your span should fix this.

As is pointed out in the comments below, span is by default an inline element, but that does not mean that you can't set its padding, setting the padding works just fine on inline elements. Your problem lies with the fact that you have set your table to be 87px wide, and the td to be 50px wide. Now the text inside your span does not fit inside the td, and because it is an inline element, it flows on to the next line. Setting display: inline-block; forces the text to not flow onto the next line. Another way to fix this is by setting your table and your td to be wider, so that it can fit more text on one line.

What you were observing with the "missing" padding on one or on both sides of your span, was not really "missing" padding. The padding is added at the start, at the end, at the top and at the bottom of the span. So in the places where the padding was "missing", it was simply not there because you were looking at a line-break, not at the end or the start of the span. Another way you could have fixed this is by setting white-space: nowrap; on the span. That's another way to ensure that the text inside a span does not wrap onto the next line.

Answer 2

Your problem is that the span elemnt has display:inline by default. inline elements can't be sized and always wrap their content. By setting display: inline-block on your span you make it behave halfway between inline (can be stacked horizontally, etc.) and block, i.e., it can be sized. The default for a non-positioned block element is to fill horizontally its container and that's why it works.