39 users online (1 members and 38 guests)  


  Results 1 to 3 of 3

Related

  1. Replies: 1
  2. nested table relative column alignment    Forum: HTML Forum
    Replies: 2
  3. [hide] tag in datalife engine !    Forum: Search Engine Optimization - SEO - Forum
    Replies: 0
  4. Help-a href hide them please    Forum: Website Scripts Forum
    Replies: 7
  1. #1
    Bostonrose's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Posts
    4

    hide column of table

    I have a table that includes 4 columns - depending on what the user selects for options, I want to show only 2 of them. I'd rather do this in css than create 2 separate tables, I was hoping I could not show certain columns even though the html was there, but not sure how. Thanks, Bostonrose

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there Bostonrose,

    I am not entirely certain how you want it to work
    So I have put together a little thing with which you can play around.
    If it does not entirely suit yuor needs the javascript can be easily
    modified for various combinatios of <td> cells
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Hidden Cells</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    body {
         background:#aaaaaa;
    }
    table {
          width:400px;
          height:500px;
          border:solid 1px #000000;
          background:#000000;
    }
    td {
         width:100px;
         height:500px;
         border:solid 1px #000000;
     }
    td#one {
          visibility:hidden;
         background:#ff0000;
     }
    td#two {
         visibility:hidden;
         background:#00ff00;
     }
    td#three {
          visibility:hidden;
         background:#0000ff;
     }
    td#four {
         visibility:hidden;
         background:#ffffff;
     }
    button {
         margin:4px;
     }
    div#butts {
         width:400px;
         position:absolute;
         left:50%;
         top:10px;
         margin-left:-200px;
         text-align:center;
     }
    div#tbl {
         width:400px;
         position:absolute;
         left:50%;
         top:50px;
         margin-left:-200px;    
     }
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    function showTd(id) {
    
    if(document.getElementById(id).style.visibility=="visible") {
         document.getElementById(id).style.visibility="hidden";
    }
    else {
         document.getElementById(id).style.visibility="visible";
      }
     }
    //]]>
    </script>
    
    </head>
    <body>
    
    <div id="butts">
    <button onclick="showTd('one')">option 1</button>
    <button onclick="showTd('two')">option 2</button>
    <button onclick="showTd('three')">option 3</button>
    <button onclick="showTd('four')">option 4</button>
    </div>
    
    <div id="tbl">
    <table><tr>
    <td id="one">left</td>
    <td id="two">center left</td>
    <td id="three">center right</td>
    <td id="four">right</td>
    </tr></table>
    </div>
    
    </body>
    </html>
    
    coothead

  3. #3
    Bostonrose's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Posts
    4

    thanks for the response

    thanks, that looks great. I'm able to use VB script to decide what I need the visibility to be rather than javascript because I'm using asp program. I didn't know about the visibility style so I'll try it out tomorrow morning when I get back into work. Thanks again. Bostonrose



Tags for this Thread