请问如何实现table中除th外其他td在一个区域内可以滚动的

就是能否在除了th外其他td在一个div中超出部分包含滚动条的效果，类似这样的
<table>
<tr>
 <th colspan="2">表头</th>
</tr>
<div style="height:80px;overflow:hidden;">
<tr>
 <td>一</td>
 <td>二</td>
</tr>
<tr>
 <td>一</td>
 <td>二</td>
</tr><tr>
 <td>一</td>
 <td>二</td>
</tr><tr>
 <td>一</td>
 <td>二</td>
</tr><tr>
 <td>一</td>
 <td>二</td>
</tr></div>
</table>

解决方案 »

  1.   

    <style type="text/css">
    .innerb {height:200px; overflow:auto;}
    .tabletwo {border-collapse:collapse;}
    </style><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><strong>::承 诺 书::</strong></td>
      </tr>
      <tr>
    <td>
    <div class="innerb">
    <table width=380 class="tabletwo">
       <tr>
        <td>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国<br>中华人民共和国</td>
    </tr>
    </table>
    </div>
    </td>
      </tr>
    </table>
      

  2.   

    你这样存在一个问题，就是表头有很多列，td也有很多列，那么th与td很难对齐，如何解决呢？
      

  3.   

    这是一个存样式控制的例子，只支持IE，如果想支持FF，需要改为用JS控制
     
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>test</title>
    <style type="text/css">
    tr#fixedHeaderTr th{     
        position:relative;     
        top:expression(document.getElementById("lockedDiv").scrollTop);
        z-index: 20;
        font-family: "宋体", "Arial", "Helvetica";
        font-size: 12px;
        font-style: normal;
        font-weight: bold;
        text-align: center;
        vertical-align: middle;
        height: 22px;
        background-color: #eeeeee;
        white-space: nowrap;
        border-left: 1px solid silver;
        border-top: 1px solid silver;
        border-bottom: 1px solid silver;
      };  div#lockedDiv table{
        margin:0;
        border-right: 1px solid silver; 
      }
      div#lockedDiv table td,th {
        height: 22px;
        border-left: 1px solid silver;
        border-bottom: 1px solid silver;
        text-align: right;
        font-family: "宋体", "Arial", "Helvetica";
        font-size: 12px;
        font-style: normal;
        font-weight: lighter;
      }
      tr#fixedFooterTr 
      {     
        position:relative;
        top:expression(document.getElementById("lockedDiv").scrollTop-document.getElementById("lockedDiv").scrollHeight+document.getElementById("lockedDiv").offsetHeight-(document.getElementById("lockedDiv").scrollWidth>0?17:0));
        z-index: 20;
        font-family: "宋体", "Arial", "Helvetica";
        font-size: 12px;
        font-style: normal;
        font-weight: bold;
        text-align: right;
        vertical-align: middle;
        height: 22px;
        background-color: #eeeeee;
        white-space: nowrap;
        border-left: 1px solid silver;
        border-top: 1px solid silver;
        border-bottom: 1px solid silver;     
      };
      
      div#lockedDiv     
      {   
      padding:0;
      margin:0;  
      height:expression(document.body.clientHeight-30);     
      width:expression(document.body.clientWidth-20);     
      } 
    </style>
    <script></script>
    </head><body>
    <div id="lockedDiv" style="overflow-x:scroll;overflow-y:auto;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr id="fixedHeaderTr">
    <th>省</th>
    <th>市</th>
    <th>县</th>
    </tr>

    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>
    <tr><td>江苏</td><td>泰州</td><td>泰兴</td></tr>

    <tr id="fixedFooterTr">
    <th>省</th>
    <th>市</th>
    <th>县</th>
    </tr>
    </table>
    </div>
    </body>
    </html>
      

  4.   

    表头固定,很难对齐.
    感觉就象鸡肋,我以前有个grid控件,可以实现这个功能,后来,还是去掉了,就为实现这个,增加了很多代码,不值当.
      

  5.   

    嵌套表格，能接受吗
    <!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>
    <title>无标题文档</title>
    </head><body> <table width="400" border="1" cellpadding="0" cellspacing="0" bordercolor="#E7FAFF" >
    <table width="400" border="1" cellpadding="0" cellspacing="0" bordercolor="#E7FAFF">
    <tr>
                  <th width="124"  style="border-right:#4EA7C5 1px solid">设备名称</th>
                  <th width="124" align="center">网络ID</th>
                  <th width="124" align="center" style="border-left:#4EA7C5 1px solid">网络类型</th>
                </tr>
    </table>
                <div style="overflow-x:hidden;overflow:scroll;width:400px;height:130px;padding:0 0px 0;border-bottom:#4EA7C5 1px solid;border-top:#4EA7C5 1px solid;SCROLLBAR-FACE-COLOR: #ffffff;SCROLLBAR-HIGHLIGHT-COLOR: #79aeff;SCROLLBAR-SHADOW-COLOR: #79aeff;SCROLLBAR-3DLIGHT-COLOR: #ffffff;SCROLLBAR-ARROW-COLOR: #79aeff;SCROLLBAR-TRACK-COLOR: #ffffff;SCROLLBAR-DARKSHADOW-COLOR: #ffffff">
    <table width="400" border="1"  cellpadding="0" cellspacing="0" bordercolor="#E7FAFF">
                    <tr bordercolor="#E7FAFF">
                      <td width="126" align="center">123</td>
                      <td width="126" align="center">123</td>
                      <td width="126" align="center">123</td>
                    </tr>
                    <tr bordercolor="#E7FAFF">
                      <td width="126" align="center">123</td>
                      <td width="126" align="center">123</td>
                      <td width="126" align="center">123</td>
                    </tr>
                    <tr bordercolor="#E7FAFF">
                      <td width="126" align="center">123</td>
                      <td width="126" align="center">123</td>
                      <td width="126" align="center">123</td>
                    </tr>
    <tr bordercolor="#E7FAFF">
                      <td width="126" align="center">123</td>
                      <td width="126" align="center">123</td>
                      <td width="126" align="center">123</td>
                    </tr>
    <tr bordercolor="#E7FAFF">
                      <td width="126" align="center">123</td>
                      <td width="126" align="center">123</td>
                      <td width="126" align="center">123</td>
                    </tr>
    <tr bordercolor="#E7FAFF">
                      <td width="126" align="center">123</td>
                      <td width="126" align="center">123</td>
                      <td width="126" align="center">123</td>
                    </tr>
    <tr bordercolor="#E7FAFF">
                      <td width="126" align="center">123</td>
                      <td width="126" align="center">123</td>
                      <td width="126" align="center">123</td>
                    </tr>
    </table>
    </div>
        </table>
    </body>
    </html>
      

  6.   


    为什么改为xhtml就不行了？
      

  7.   

    学习一下，好像还是用纯CSS控制，要好一点
      

  8.   

    这个可行，至于在xhtml中不行。会不会和css样式有关
      

  9.   


    3楼的我试了，你这个很棒，支持的浏览器有：IE、Opera、Firefox、Chrome、搜狗、遨游3.0 
    都OK的