table表头固定

最新推荐文章于 2023-09-27 18:39:30 发布
最新推荐文章于 2023-09-27 18:39:30 发布
阅读量109 收藏
点赞数
文章标签： javascript 前端 ViewUI
原文链接：https://my.oschina.net/huoyun/blog/1818250
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

今天有个项目小优化，就是报表页面太长，需要加个固定的table头，方便操作人员浏览。

       因此就需要采用css样式来固定，在网上搜了很多，但都不太满足(要嘛需要自己写好多样式，要嘛就是固定的表头在鼠标滚动时，会出现晃动，或者thead与tbody中的tr错位)，尝试了很多，都快要放弃了(准备请教前端同学)，最后还好又找到了一个帖子，经过略微调试了一下，比较符合我的需求。

代码简洁，无需写额外样式代码，并且表头能很好的固定。略微修改一下就可以应用到一个单独的html页面中。好了，废话不多说，直接贴代码，(没有找到上传附件的地方)如果觉得有用的同学,请复制存储为一个html文件即可。

需要引入3个线上资源(jquery.min.js、bootstrap.min.js、bootstrap.css)

<html>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<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/bootstrap/3.3.4/js/bootstrap.min.js" ></script>
<style type="text/css">
    body {
        padding-top: 50px;
    }
    #rollDiv {
        padding: 0;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .fixTable thead {
        background-color: #ecebeb;
    }

    .fix-table {
        table-layout:fixed;
        word-break:break-all;
    }
</style>
<body>
<div id="rollDiv" class="col-xs-offset-3 col-xs-6" style="margin: 0 10px;width:99%;">
    <table class="table table-bordered scrollTable fix-table">
        <thead><tr><th>Sl No</th><th>Name</th><th>Subject</th><th>Marks</th></tr></thead>
        <tbody>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        <tr><th>1</th><td>Praveen</td><td>Communication Disorders</td> <td>23</td></tr>
        </tbody>
    </table>
</div>

<script type="text/javascript">
    $(function () {
        initTableStyle();
    });

    var initTableStyle = function(){
        var $fixTable = $('#rollDiv .fixTable');
        $('#rollDiv').css('height',window.screen.height*0.7+'px');
        $('#rollDiv').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 fix-table"><thead>' + html + '</thead></table>');
                table.css(style);
                $(id).append(table);
                $fixTable = $(this).find('.fixTable');
            }
        });
    }
</script>
</body>
</html>

html预览效果图：

190627_6bd7_1789770.png

 

转载于:https://my.oschina.net/huoyun/blog/1818250

weixin_34402408
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html Table 表头固定的实现
09-22
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
table 表头固定
github_38186390的博客
09-27 1975
一。table 表头固定说明。我们将表头和表内容分成两个表格就可以解决该问题。 二。代码。 css代码：里面定死的宽高只是为啦方便看效果，实际中需要使用js计算出来。 * { box-sizing: border-box; } .table { border: 1px solid #efefef; ...
table固定表头
qq_38662977的博客
01-02 192
table固定表头
Table固定表头
Free Labor 的专栏
03-25 371
Table固定表头 使用CSS position:sticky <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 28px; } tr:nth-child(even) {background-color: #f2f2f2;} tr:hov.
table表头固定(一个table）
sca98655的博客
03-09 319
 http://www.w3.org/TR/html4/loose.dtd">              Document    div{  overflow: auto;  width: 100%;  }  table{  margin:0 auto;  border-collapse: collapse;  border: none;  }  t
table表格固定表头
weixin_54366356的博客
06-04 5976
table表格内容过多时会出现滚动，若不固定表头的话，当滚动到下方时即看不见每一列所对应的标题，影响用户体验！ 废话不多说，直接上代码！！！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-
js table 固定表头
02-16
js table 固定表头
html table 固定表头和列
09-21
html table 固定表头和列，下载后，运行index.html页面即可看到效果。
实现Table表头和列固定
08-01
实现表头和列固定，并可行多表头，多列(左右都可以)，无错位
固定table的thead表头
11-11
固定table的thead表头
表头固定，table,div,样式
01-27
报表表头固定，通过div固定table行和列 自动滚动条
HTML table表头固定
最新发布
普罗旺斯
09-27 1328
【代码】HTML table表头固定。
table固定表头、固定列
RRRRRDong的博客
07-17 8389
最近在做一些报表，使用原生table画的，记录一下固定表头的一些方法。 使用position:sticky来固定表头 html: <div id="common-table"> <table id="table-container" cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th>1</th>
table实现表头固定
weixin_30301449的博客
01-07 122
1 <div style="width: 800px;"> 2 <div class="table-head"> 3 <table> 4 <colgroup> 5 <col style="width: 80px;" /> 6 ...
table 表格 实现固定表头
weixin_44099519的博客
09-11 416
现在有很多UI框架都封装好了table的各种使用方法，这里记录一下，不用UI框架怎么实现表头固定。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style&gt...
elementui table 表头固定
07-21
Element UI 的 Table 组件默认情况下是不支持表头固定的，但你可以通过一些 CSS 和 JavaScript 的方式来实现表头固定的效果。 以下是一种实现表头固定的方法： 1. 使用 CSS 设置表头的固定样式。可以通过设置表头...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值