如何固定表头? 用bootstrap的响应式表格-问答-阿里云开发者社区-阿里云

开发者社区> 杨冬芳> 正文

如何固定表头? 用bootstrap的响应式表格

2016-06-12 10:46:56 4096 1

表格想用bootstrap的,表头fixed之后,宽度会改变,有没有办法不用JS实时计算就可以实现表头固定呢?
固定表头下的效果如下

<div class="table-responsive">
  <table class="table">
    <thead>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
        </tr>
        ……
    </tbody>
  </table>
</div>
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:33:25

    screenshot

    <!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);
    
            $('#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'
                    };
                var th_width = [];
                $(id + ' .scrollTable th').each(function() {
                    th_width.push(this.offsetWidth);
                });
                if ($(id + ' .fixTable') && $(id + ' .fixTable').length) {
                    (scrollTop === 0) ? $(id + ' .fixTable').addClass('hidden') : $(id + ' .fixTable').removeClass('hidden');
                    $(id + ' .fixTable').find('th').each(function(i) {
                        // $(this).css('width', th_width[i] + 'px');  //注释掉这行在火狐下就不会抖动了
                    });
                    $(id + ' .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.find('th').each(function(i) {
                        // $(this).css('width', th_width[i] + 'px');  //注释掉这行在火狐下就不会抖动了
                    });
                    table.css(style);
                    $(id).append(table);
                }
            }); 
        })
    </script>
    </body>
    </html>
    0 0
相关问答

4

回答

Spark 【问答合集】

社区小助手 2019-05-29 14:13:40 123646浏览量 回答数 4

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 157040浏览量 回答数 145

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 92819浏览量 回答数 28

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 146742浏览量 回答数 22

1

回答

在flink集群模式下,能不能指定某个节点的solt来执行一个task?

孙goku 2019-07-01 15:19:09 113328浏览量 回答数 1

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 145581浏览量 回答数 31

7

回答

flink sql 支持checkpoints吗?

游客izljdlkgbdwfc 2019-07-10 17:46:37 121096浏览量 回答数 7

23

回答

【云服务器分享】网站访问速度快才是硬道理

dreamdoo 2012-10-15 10:15:02 85172浏览量 回答数 23

249

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 302559浏览量 回答数 249

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80091浏览量 回答数 13
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
推荐问答
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载