请教一个问题想做一个 收缩展开的按钮像这样的
    http://wuhan.edushi.com/     
我大概是这样
   <table>
      <tr>
         <td></td>
         <td>放那个收缩和展开的图片</td>
         <td></td>
      </tr>
   </table>
    我隐藏第三个td后 前两个td宽度没有变化
  想让他们布满整行

解决方案 »

  1.   

    希望有用!!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>www.nijj.cn/blog</title>
    <script type="text/javascript">
    function tablecollapse()
    {
    /* Variables */
    var collapseClass='footcollapse';
    var collapsePic='arrow_up.gif';
    var expandPic='arrow_down.gif';
    var initialCollapse=true;
    // loop through all tables
    var t=document.getElementsByTagName('table');
    var checktest= new RegExp("(^|\s)" + collapseClass + "(\s|$)");
    for (var i=0;i<t.length;i++)
    {
    // if the table has not the right class, skip it
    if(!checktest.test(t[i].className)){continue;}
    // make the footer clickable
    t[i].getElementsByTagName('tfoot')[0].onclick=function()
    {
    // loop through all bodies of this table and show or hide
    // them
    var tb=this.parentNode.getElementsByTagName('tbody');
    for(var i=0;i<tb.length;i++)
    {
    tb[i].style.display=tb[i].style.display=='none'?'':'none';
    }
    // change the image accordingly
    var li=this.getElementsByTagName('img')[0];
    li.src=li.src.indexOf(collapsePic)==-1?collapsePic:expandPic;
    }
    // if the bodies should be collapsed initially, do so
    if(initialCollapse)
    {
    var tb=t[i].getElementsByTagName('tbody');
    for(var j=0;j<tb.length;j++)
    {
    tb[j].style.display='none';
    }
    }
    // add the image surrounded by a dummy link to allow keyboard
    // access to the last cell in the footer
    var newa=document.createElement('a');
    newa.href='#';
    newa.onclick=function(){return false;}
    var newimg=document.createElement('img');
    newimg.src=initialCollapse?expandPic:collapsePic;
    var tf=t[i].getElementsByTagName('tfoot')[0];
    var lt=tf.getElementsByTagName('td')[tf.getElementsByTagName('td').length-1];
    newa.appendChild(newimg);
    lt.insertBefore(newa,lt.firstChild);
    }
    }
    // run tablecollapse when the page loads
    window.onload=tablecollapse;
    </script>
    <style type="text/css">
    body{
    font-family:Arial,Sans-Serif;
    font-size:90%;
    background:#cc9;
    }
    #boundary{
    background:#f8f8f8;
    padding:2em;
    width:40em;
    }
    h1{
    font-family:"Trebuchet MS",Sans-serif;
    text-transform:uppercase;
    color:#696;
    font-size:120%;
    }
    table.footcollapse{
    width:30em;
    }
    table.footcollapse caption{
    font-size:120%;
    text-transform:uppercase;
    text-align:left;
    padding:.5em 1em;
    }
    table.footcollapse th{
    text-align:left;
    }
    table.footcollapse,table.footcollapse th,table.footcollapse th
    {
    border:none;
    border-collapse:collapse;
    }
    table.footcollapse thead th
    {
    width:10em;
    border-style:solid;
    border-width:1px;
    border-color:#cff #69c #69c #cff;
    background:#9cf;
    padding:2px 10px;
    }
    table.footcollapse tfoot th,
    table.footcollapse tfoot td
    {
    border-style:solid;
    border-width:1px;
    border-color:#9cf #369 #369 #9cf;
    background:#69c;
    padding:2px 10px;
    }
    table.footcollapse tbody{
    background:#ddd;
    }
    table.footcollapse tbody td{
    padding:5px 10px;
    border:1px solid #999;
    }
    table.footcollapse tbody th{
    padding:2px 10px;
    border:1px solid #999;
    border-left:none;
    }
    table.footcollapse tbody tr.odd{
    background:#ccc;
    }
    table.footcollapse tfoot td img{
    border:none;
    vertical-align:bottom;
    padding-left:10px;
    float:right;
    }
    </style>
    </head>
    <body>
    <table summary="CDs I listened to recently" class="footcollapse">
    <caption>My recent CDs</caption>
    <thead>
    <tr>
    <th>Title</th>
    <th>Artist</th>
    <th>Quality</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
    <th>Total</th>
    <td colspan="2">5 CDs</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
    <th>Front 242</th>
    <td>Front By Front</td>
    <td>Quite OK</td>
    </tr>
    <tr class="odd">
    <th>Miss Kittin</th>
    <td>i.com</td>
    <td>good buy</td>
    </tr>
    <tr>
    <th>Die Fantastischen Vier</th>
    <td>Viel</td>
    <td>Nice comeback</td>
    </tr>
    <tr class="odd">
    <th>Nine Inch Nails</th>
    <td>With Teeth</td>
    <td>Oh yes, finally a new one</td>
    </tr>
    <tr>
    <th>Garbage</th>
    <td>Bleed like me</td>
    <td>Needs more listening</td>
    </tr>
    </tbody>
    </table>
    <table summary="DVDs I watched recently" class="footcollapse">
    <caption>My recent DVDs</caption>
    <thead>
    <tr>
    <th>Title</th>
    <th>Quality</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
    <th>Total</th>
    <td>5 DVDs</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
    <th>Star Trek TNG Season 7</th>
    <td>They lost it</td>
    </tr>
    <tr class="odd">
    <th>Big Fish</th>
    <td>Wonderful Tale</td>
    </tr>
    <tr>
    <th>Closer</th>
    <td>I want my time back!</td>
    </tr>
    <tr class="odd">
    <th>Hot Shots</th>
    <td>Always worth it</td>
    </tr>
    <tr>
    <th>The Party</th>
    <td>A shame there is not more Sellers</td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>
      

  2.   


    <div style="width:300px; border:#000000 1px solid;">
      <table width="100%" id="test"> 
          <tr> 
            <td id="td1">td1</td> 
            <td id="td2" style=" background-color:#CCCCCC;">放那个收缩和展开的图片 </td> 
            <td id="td3">td3</td> 
          </tr> 
      </table>
    </div>
    <div style="float:left;cursor:pointer;" id="testbt">隐藏</div>
    <script type="text/javascript">
    function $(strid){return document.getElementById(strid);}
    $("testbt").onclick = function(){
    $("td3").style.display = $("td3").style.display == "none" ? "" : "none";
    $("testbt").innerHTML = $("td3").style.display == "none" ? "显示" : "隐藏";
    }
    </script>