Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Span tag inside td won't span entire cell

    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

    Code:
    <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;
    }

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    remove

    width:100%;

    add

    display:block;

    to span.EnteredValueClass, presumably.

  • Users who have thanked met for this post:

    rkeslar (06-04-2010)

  • #3
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    To clarify met's post, spans don't fill. They're inline elements. His display:block suggestion effectively turns it into a div.
    Are you a Help Vampire?

  • The Following 2 Users Say Thank You to tomws For This Useful Post:

    effpeetee (06-05-2010), rkeslar (06-04-2010)

  • #4
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up Thanks

    I understand. Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •