table实现下滑表头悬浮在页面顶部效果

发表于 分类于
思路:

将table分为两个表,表头部分和内容部分,通过jquery实时控制上下两表的th,td宽度统一,在表头部分触顶时改变定位方式使它悬浮

代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
    <title>悬浮table头</title>
    <style type="text/css">
        th{background: green}
        th,td{line-height: 200px;border: 1px solid #eee;width: 200px;}
        .table{word-break:break-all;word-wrap:break-word}
    </style>
</head>
<body>
    <div style="width: 100%;height: 50px;background: yellow;">导航栏</div>
    <table id="header_table" style="top: 0;z-index: 1000;margin-bottom: 0px;" class="table">
        <thead id="t_thead">
        <tr>
            <th>标题一</th>
            <th>标题二</th>
            <th>标题三</th>
            <th>标题四</th>
            <th>标题五</th>
        </tr>
        </thead>
    </table>
    <table id="body_table" class="table">
        <tbody>
        <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr>
        <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr>
        <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr>
        <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr>
        <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr>
        <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr>
        <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr>
        <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr>
        <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr>
        </tbody>
    </table>
</body>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    // 调整上下表宽度统一
    var tableHd = $("#header_table");
    var tableTop = tableHd.offset().top;
    $(window).scroll(function(){
        var _t = $(window).scrollTop();

        if(_t-tableTop>=0){
            //table-header 已经到窗口顶部了
            tableHd.css({
                "position":"fixed"
            })
        }else{
            tableHd.css({
                "position":"static"
            })
        }
    });
    autoWidth();
    function autoWidth(){
        var body_first_tr = $('#body_table').width();
        $('#header_table').width(body_first_tr);


        for(var i=0;i<5;i++){
            var header_id = '#body_table tbody tr:eq(0) td:eq('+i+')';
            var body_id = '#header_table thead tr:eq(0) th:eq('+i+')';
            var body_first_tr = $(header_id).width();
            $(body_id).width(body_first_tr);
        }
        //console.log(body_first_tr);
    }
    $(window).resize(function () {//当浏览器大小变化时
        autoWidth();
    });
</script>
</html>