怎么实现一个表格表头不动下边上下滚动的

一个静态页面一个表格表头不动表下边上下滚动，表格高500，如果内容超过高500会出现滚动条，如果没有超过500就不会显示滚动条。这个要怎么实现。

解决方案 »

  1.   

    用两个div分别去模拟table的表头和表体实现
    或者用现成的控件
      

  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>
    <title></title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="author" content="Hulu">
    <style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    td{
        width:200px;
        line-height:30px;
    }
    table{
        width:2000px;
    }
    #th{
        background-color:#888888;
        position:absolute;
        width:2000px;
        height:30px;
        top:0;
        left:0;
    }
    #wrap{
        position:relative;
        padding-top:30px;
    }
    </style>
    <script type="text/javascript">
    var pre_scrollTop=0;//滚动条事件之前文档滚动高度
    var pre_scrollLeft=0;//滚动条事件之前文档滚动宽度
    var obj_th;window.onload =function () {
        pre_scrollTop=(document.documentElement.scrollTop || document.body.scrollTop);
        pre_scrollLeft=(document.documentElement.scrollLeft || document.body.scrollTop);
        obj_th=document.getElementById("th");
    };
    window.onscroll = function(){
        if(pre_scrollTop != (document.documentElement.scrollTop || document.body.scrollTop)){
            //滚动了竖直滚动条
            pre_scrollTop=(document.documentElement.scrollTop || document.body.scrollTop);
            if(obj_th){
                obj_th.style.top=(document.documentElement.scrollTop || document.body.scrollTop)+"px";
            }
        }
        else if(pre_scrollLeft != (document.documentElement.scrollLeft || document.body.scrollLeft)){
            //滚动了水平滚动条
            pre_scrollLeft=(document.documentElement.scrollLeft || document.body.scrollLeft);
        }
    };
    </script>
    </head>
    <body>
    <div id="wrap">
    <table cellpadding="0" cellspacing="0">
        <tr id="th">
            <td>001</td>
            <td>002</td>
            <td>003</td>
            <td>004</td>
            <td>005</td>
            <td>006</td>
            <td>007</td>
            <td>008</td>
            <td>009</td>
            <td>0010</td>
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容1</td>
            <td>内容1</td>
            <td>内容1</td>
            <td>内容1</td>
            <td>内容1</td>
            <td>内容1</td>
            <td>内容1</td>
            <td>内容1</td>
            <td>内容1</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
        </tr>
    </table>
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </body>
    </html>
      

  3.   

    简单点的办法
    两个table,每个td设定好高度第二个table 用div包起来。div设置滚动
      

  4.   

    标题写到两个table，带有需要滚动内容的table放到一个div里，然后给div加滚动条。
      

  5.   

    楼上的我试过了 没有用的 在平板电脑里面不可以显示滚动条的 用iframe 框架都不可以  还有什么好的办法没有
      

  6.   

    既然在平板电脑里连div都不可能有滚动条 那还是放弃吧
    平板电脑用的是什么浏览器啊
      

  7.   

    用的Google浏览器  都没有人遇到过吗
      

  8.   

    <!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>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="author" content="Hulu">
    <script type="text/javascript">
    </script>
    </head>
    <body>
    <div id="wrap">
    <table>
    <tr>
    <td>
    <table border="1" cellpadding="0" cellspacing="0">
     <tr id="th">
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td>
    <div  style="height:100px; overflow:auto">
    <table border="1" cellpadding="0" cellspacing="0">
    <tr>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    </tr>
    <tr>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    </tr>
    <tr>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    </tr>
    <tr>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    </tr>
    <tr>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    </tr>
    <tr>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    </tr>
    <tr>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    </tr>
    <tr>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    </tr>
    <tr>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    </tr>
    <tr>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
    </tr>
    </table>
    </div>
    </td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    楼主看看这是不是你要的效果  其他细节楼主自己整一下