...

View Full Version : Span tag inside td won't span entire cell



rkeslar
06-04-2010, 08:25 PM
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
06-04-2010, 09:03 PM
remove

width:100%;

add

display:block;

to span.EnteredValueClass, presumably.

tomws
06-04-2010, 09:24 PM
To clarify met's post, spans don't fill. They're inline elements. His display:block suggestion effectively turns it into a div.

rkeslar
06-04-2010, 09:49 PM
I understand. Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum