谁能帮我把这个表格转换为 div + css 的布局，谢谢。

你可以直接下c和d的高度，比如：
<table width="455" border="0" cellpadding="0" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td width="105" height="25" bgcolor="#cccccc">a</td>
<td width="347" height="25" bgcolor="#cccccc">b</td>
</tr>
<tr>
<td width="105" bgcolor="#dddddd" height="180" style="height:180px;">你也可用样式来设置，不过style属性的优先级要高于height180</td>
<td width="347" bgcolor="#dddddd" height="200">200</td>
</tr>
<tr>
<td width="105" height="25" bgcolor="#cccccc">e</td>
<td width="347" height="25" bgcolor="#cccccc">f</td>
</tr>
</table>

解决方案 »

  1.   

    <div id="parent" style="width:600px;height:200px;border:medium solid #3366FF;">
    <div style="width:600px;border:1px solid #FF0000;">
    <span style="width:296px;border:1px solid #33CC33;background:#FF9966;height:30px;align:right;">a</span>
    <span style="width:298px;border:1px solid #3333FF;background:#FF9966;height:30px;align:left;">b</span>
    </div>
    <div style="width:600px;border:1px solid #00FF33;">
    <span style="width:296px;border:1px solid #33CC33;background:#FF6600;height:130px;align:right;">c</span>
    <span style="width:298px;border:1px solid #3333FF;background:#FF6600;height:130px;align:left;">d</span>
    </div>
    <div style="width:600px;border:1px solid #FFCC33;">
    <span style="width:296px;border:1px solid #33CC33;background:#66CC00;height:30px;align:right;">e</span>
    <span style="width:298px;border:1px solid #3333FF;background:#66CC00;height:30px;align:left;">f</span>
    </div>
    </div>
      

  2.   

    <!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>无标题文档</title>
    <style>
    .divtable{ width:455px;border:0;border-spacing:1px; background-color:#FFFFFF}
    .divtd1{  width:105px;float:left;height:25px;background-color:#cccccc}
    .divtd2{ width:347px; float:right;height:25px;background-color:#cccccc}
    .divtd3{ width:105px; float:left;overflow-y:auto;background-color:#dddddd}
    .divtd4{ width:347px; float:right;overflow-y:auto;background-color:#dddddd}
    </style>
    </head><body>
    <div class="divtable">
     <div>
       <div class="divtd1">a</div>
       <div class="divtd2">b</div>
     </div>
     <div>
       <div class="divtd3">c</div>
       <div class="divtd4">d</div>
     </div>
     <div>
       <div class="divtd1">e</div>
       <div class="divtd2">f</div>
      </div>
    </div>
    </body>
    </html>
      

  3.   

    蓝水仁，你写的是什么？我的根本不是你那种样式。无心之尘，你的也不行，第二行第一列的内容如果是c<br>c，就乱了。
      

  4.   

    <style>
    #dyFsty {width:452px;}
    #dySsty {border-right:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;height:25px;width:105px;float:left;background:#CCC;}
    #dyTsty {border-right:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;height:25px;width:347px;float:left;background:#CCC;}
    #dyMsty {border-right:1px solid #FFFFFF;width:105px;float:left;background:#DDD;}
    #dyLsty {width:346px;float:left;}
    #Spacer {background:#DDD;width:451px;border-bottom:1px solid #FFFFFF;}
    </style>
    <body>
    <div id="dyFsty">
    <div id="dySsty">a</div>
    <div id="dyTsty">b</div>
    <div id="Spacer">
    <div id="dyMsty">cc<br>c</div>
    <div id="dyLsty">d</div>
    </div>
    <div id="dySsty">e</div>
    <div id="dyTsty">f</div>
    </div>
      

  5.   

    如果C多的话就没有办法想table一样那样整体适应了
      

  6.   

    孟子啊，你的如果d是d<br>d<br>d就不行了。
      

  7.   

    <style>
    #dyFsty {width:452px;}
    #dySsty {border-right:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;height:25px;width:105px;float:left;background:#CCC;}
    #dyTsty {border-right:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;height:25px;width:347px;float:left;background:#CCC;}
    #dyMsty {border-right:1px solid #FFFFFF;width:105px;float:left;background:#DDD;}
    #dyLsty {width:346px;float:left;border-left:1px solid #FFFFFF;}
    #Spacer {background:#DDD;width:451px;border-bottom:1px solid #FFFFFF;}
    </style>
    <body>
    <div id="dyFsty">
    <div id="dySsty">a</div>
    <div id="dyTsty">b</div>
    <div id="Spacer">
    <div id="dyMsty">c</div>
    <div id="dyLsty">d<br>d<br>d</div>
    </div>
    <div id="dySsty">e</div>
    <div id="dyTsty">f</div>
    </div>
      

  8.   

    <style>
    #dyFsty {width:452px;}
    #dySsty {border-right:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;height:25px;width:105px;float:left;background:#CCC;}
    #dyTsty {border-right:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;height:25px;width:347px;float:left;background:#CCC;}
    #dyMsty {border-right:1px solid #FFFFFF;width:105px;float:left;background:#DDD;}
    #dyLsty {width:346px ;border-right:1px solid #FFFFFF;float:left;background:#DDD;}
    #Spacer {background:#DDD;width:451px;border-bottom:1px solid #FFFFFF;}
    </style>
    <body>
    <div id="dyFsty">
    <div id="dySsty">a</div>
    <div id="dyTsty">b</div>
    <div id="Spacer">
    <div id="dyMsty">c<br>c<br>c</div>
    <div id="dyLsty">d<br>d</div>
    </div>
    <div id="dySsty">e</div>
    <div id="dyTsty">f</div>
    </div>
      

  9.   

    <style>
    #dyFsty {width:452px;}
    #dySsty {border-right:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;height:25px;width:105px;float:left;background:#CCC;}
    #dyTsty {border-right:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;height:25px;width:347px;float:left;background:#CCC;}
    #dyMsty {border-right:1px solid #FFFFFF;width:105px;float:left;background:#DDD;}
    #dyLsty {width:346px;float:left;}
    #Spacer {background:#DDD;width:451px;border-bottom:1px solid #FFFFFF;}
    </style>
    <script>
    function Sync()
    {
     if(document.all.dyLsty.offsetHeight>document.all.dyMsty.offsetHeight)
     {
      document.all.dyMsty.style.height=document.all.dyLsty.offsetHeight + "px"
     }
     else
     {
      document.all.dyLsty.style.height=document.all.dyMsty.offsetHeight + "px"
     }
    }
    </script>
    <body onload="Sync()">
    <div id="dyFsty">
    <div id="dySsty">a</div>
    <div id="dyTsty">b</div>
    <div id="Spacer">
    <div id="dyMsty">c</div>
    <div id="dyLsty">d<br>d</div>
    </div>
    <div id="dySsty">e</div>
    <div id="dyTsty">f</div>
    </div>
    </body>
      

  10.   

    IE6和FireFox兼容版本<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
       "http://www.w3.org/TR/html4/loose.dtd"> 
    <html>
    <head>
    <style>
    #PDiv {width:452px;}
    #Div1 {border-right:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;height:25px;width:105px;float:left;background:#CCC;}
    #Div2 {border-right:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;height:25px;width:345px;float:left;background:#CCC;}
    #Div3 {border-right:1px solid #FFFFFF;width:105px;float:left;background:#DDD;}
    #Div4 {width:345px;float:left;background:#DDD;}
    #Spacer1 {background:#DDD;width:451px;border-bottom:1px solid #FFFFFF;}
    </style>
    <script>
    function Sync()
    {
     if(document.getElementById("Div4").offsetHeight>document.getElementById("Div3").offsetHeight)
     {
      document.getElementById("Div3").style.height=document.getElementById("Div4").offsetHeight + "px"
     }
     else
     {
      document.getElementById("Div4").style.height=document.getElementById("Div3").offsetHeight + "px"
     }
    }
    </script>
    </head>
    <body onload="Sync()">
    <div id="PDiv">
    <div id="Div1">a</div>
    <div id="Div2">b</div>
    <br clear="all"/>
    <div id="Spacer1">
    <div id="Div3">c</div>
    <div id="Div4">d<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>d</div>
    <br clear="all"/>
    </div>
    <div id="Div1">e</div>
    <div id="Div2">f</div>
    </div>
    </body>
    </html>
      

  11.   

    呵呵，最好不要这样````CSS布局的话，最好不要用自适应高度的办法
      

  12.   

    c和d的高度能够相等-------------------------
    They are always in the same height, aren't they ????