固定头部的表格

最新推荐文章于 2019-06-17 18:43:52 发布

weixin_34005042

最新推荐文章于 2019-06-17 18:43:52 发布

阅读量97

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000004713875

版权

实现思路就是复制一下表格头部然互覆盖在原有的头部上，监听滚动事件
之前动态的设置覆盖上去的thead里面th的宽度在火狐下会与抖动现象，直接写样式就不会了
效果图如下

图片描述

贴一下代码：


<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="renderer" content="webkit" />
    <title>头部固定的表格</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" />
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js" ></script>
    <style>
        body {
            padding-top: 100px;
        }
        #goodsList {
            padding: 0;
            height: 400px;
            overflow-y: scroll;
        }
        .fixTable thead {
            background-color: #fff; 
        }
    </style>
</head>
<body>


<div id="goodsList" class="col-xs-offset-3 col-xs-6">
    <table id="textTable" class="table table-bordered scrollTable">
        <thead>
        <tr>
            <th width="35%">姓名</th>
            <th width="25%">年龄</th>
            <th width="20%">性别</th>
            <th width="10%">身高</th>
            <th width="10%">体重</th>
        </tr>
        </thead>
        <tbody id="testTbody"></tbody>
    </table>
</div>

<script type="text/javascript">
    
    $(document).ready(function () {

        var html = '',
            $ele = $('#testTbody');
        for(var i = 0; i < 20; i++) {
            html += "<tr><td>123456</td><td>12345</td><td>1234</td><td>123</td><td>12</td></tr>";
        }
        $ele.empty().append(html);

        var $fixTable = $('#goodsList .fixTable');
        $('#goodsList').scroll(function() {
            var id = '#' + this.id;
            var scrollTop = $(id).scrollTop() || $(id).get(0).scrollTop,
                style = {
                    'position': 'absolute',
                    'left': '0',
                    'right': '0',
                    'top': scrollTop + 'px'
                };
            if ($fixTable.length) {
                (scrollTop === 0) ? $fixTable.addClass('hidden') : $fixTable.removeClass('hidden');
                $fixTable.css(style);
            } else {
                var html = $(id + ' .scrollTable thead').get(0).innerHTML;
                var table = $('<table class="table table-bordered fixTable"><thead>' + html + '</thead></table>');
                table.css(style);
                $(id).append(table);
                $fixTable = $(this).find('.fixTable');
            }
        });
    })
</script>
</body>
</html>

weixin_34005042

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
固定头部的表格

实现思路就是复制一下表格头部然互覆盖在原有的头部上，监听滚动事件之前动态的设置覆盖上去的thead里面th的宽度在火狐下会与抖动现象，直接写样式就不会了效果图如下贴一下代码：<!DOCTYPE html><html lang="zh-cn"><head> <meta chars...
复制链接

扫一扫

固定头部的表格

“相关推荐”对你有帮助么？