SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Retroactively change a table cell width

    I have a web page that's framed within a table by our CMS. The problem is that it inserts padding on both cells to the left and right of the page:

    Code:
    <table class="content" border="0" cellpadding="0" cellspacing="0" summary="" width="950">
      <tr>
        <td height="1" width="7">
          <img src="images/common/spacer.gif" alt="space" height="1" title="space" width="7"></td>
        <td height="1" width="100%">
          <img src="images/common/spacer.gif" alt="space" height="1" title="space" width="100%"></td>
        <td height="1" width="7">
          <img src="images/common/spacer.gif" alt="space" height="1" title="space" width="7"></td>
      </tr>
    The middle td (on the next row) is where my page resides. I'm trying to use javascript to change the above td widths from 7 to 0. I can't directly change the html since it's being outputted by the CMS.

    Here's the javascript:

    Code:
    var tables=document.getElementsByTagName('table');
    	
    for (var i=0; i< tables.length; i++) {
    	if(tables[i].className=='content'){
    		var tds = tables[i].getElementsByTagName('td');
    
                    //set 1st and 3rd cell widths to nothing
    		tds[0].setAttribute("width", 0);
    		tds[2].setAttribute("width", 0);		
    		
    	}
    }
    When I output the before/after widths, it seems like they are being changed to 0. However, the page padding remains and I'm stuck with the same problem as before. What am I doing wrong here?

  2. #2
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone? ideas?

  3. #3
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try to remove childNodes, or simply change className, something like this

    td.none{width:0 !important}
    td.none img{display:none;}

    change in your function setAttribute to

    tds[0].className='none';
    tds[2].className='none';

  4. #4
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44° 56.537' W 123° 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Padding adds to the overall width (or height) of an element and is not directly affected by the width attribute. To change the padding you will have to explicitly change it.

    Bear in mind, IE (at least through 6) often does not allow format changes to table elements that are not contained in a tbody.
    Last edited by JVLB; Dec 31, 2006 at 13:00.


Bookmarks

Posting Permissions

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