Span tag inside td won't span entire cell

[rkeslar]

I have a span tag inside a td in a table and I have a background set on the span tag. I want it to fill the entire cell, but it does not do this. Can anyone see what might be going on?

Thanks

<table cellspacing="0" rules="all" border="1" id="detailsGrid_ScrollGrid" style="border-collapse:collapse;">


	<tr class="row0" index="0" id="detailsGrid_sr1545164581" style="font-family:Courier New;padding:3px;width:100px;">

		<td id="detailsGrid_r0c3" nowrap="true" style="height: 20px" style="width:100px; height: 20px;">05/31/2009</td>
		<td id="detailsGrid_r0c4" nowrap="true" style="height: 20px" style="width:100px; height: 20px;">
			<span class="EnteredValueClass">$854.00</span>
		</td>
		<td id="detailsGrid_r0c5" nowrap="true"  style="width:100px; height: 20px;">
			<span  class="EnteredValueClass">1,543.00</span>
		</td>
		<td id="detailsGrid_r0c6" nowrap="true" style="width:100px; height: 20px;">
			<span class="EnteredValueClass">$42.00</span>
		</td>
		<td id="detailsGrid_r0c7" nowrap="true" style="width:100px; height: 20px;">
			<span class="EnteredValueClass">158.00</span>
		</td>
		<td id="detailsGrid_r0c8" nowrap="true" style="width:100px; height: 20px;">
			<span class="BlankClass">&nbsp;</span></td>
		<td id="detailsGrid_r0c9" nowrap="true"  style="width:100px; height: 20px;">
			<span class="EnteredValueClass">21.00</span></td>
		<td id="detailsGrid_r0c10" nowrap="true" style="width:100px; height: 20px;">
			<span class="TotalsClass">$896.00</span>
		</td><td id="detailsGrid_r0c11" nowrap="true"  style="width:100px; height: 20px;">
			<span class="TotalsClass">1,722.00</span></td>
	</tr>
</table>

CSS:

span.BlankClass
{
width:100%;
padding: 3px;
}

span.EnteredValueClass
{
font-weight:normal;
font-family: sans-serif;
background-color:#D3D3D3;
color:#000;
width:100%;
text-align:right;
vertical-align:top;
bottom: 0px;
padding: 3px;
}
span.TotalsClass
{
font-weight:normal;
font-family: sans-serif;
/*background-color:#fcc;*/
color:#000;
width:100%;
padding: 3px;
}

[met]

remove

width:100%;

add

display:block;

to span.EnteredValueClass, presumably.

[tomws]

To clarify met's post, spans don't fill. They're inline elements. His display:block suggestion effectively turns it into a div.

[rkeslar]

I understand. Thanks