html固定表头

た入场券 2022-07-12 06:25 161阅读 0赞

<style>  
        .fixedHead \{  
            top: 0;  
            position: fixed;  
            display: flex;  
            background-color: \#cfe7ed;  
        \}  
        .fixedHead2 \{  
            top: 30px;  
            position: fixed;  
            display: flex;  
            background-color: \#cfe7ed;  
        \}  
    </style>  
    <script>  
        $(document).ready(function () \{  
            var tr = $('tbody>tr:first');  
            var trtwo = $('th\[colspan\]');  
            if (tr != undefined && tr != null && tr.length > 0) \{  
                var newhead = tr.clone();  
                var newhead2 = $('table').clone();  
                newhead2.find('tr:gt(1)').remove();  
                var tr\_top = tr.offset().top;  
                if (trtwo != undefined && trtwo.length > 0) \{  
                    $(document).scroll(function () \{  
                         
                        if ($(window).scrollTop() > tr\_top) \{  
                            
                            $('table').before(newhead2);  
                            newhead2.addClass('fixedHead');  
                             
                            var tds = $('tbody:eq(1)>tr:eq(2) td');  
                            var header = newhead2.find('tr:eq(1)').find('th');  
                            var colgap=tds.length-header.length ;//列的差额  
                            if (colgap>0) \{//得到合并单元格数量                     
                                newhead2.find('tr:eq(0)').find('th').each(function (i, e) \{  
                                    if (i <= colgap) \{  
                                        $(e).attr('width', tds.eq(i).width());  
                                    \}  
                                \});  
                            \};  
                            newhead2.find('tr:eq(1)').find('th').each(function (i, e) \{  
                                $(e).attr('width', tds.eq(i + colgap).width());  
                            \});  
                              
                            console.log('tds length is ' + tds.length);  
                            console.log('header is ' + newhead2.find('tr:eq(1)').find('th').length);  
                        \} else \{  
                            newhead2.remove();  
                        \}  
                    \})  
                \} else \{  
                    $(document).scroll(function () \{  
  
  
                        if ($(window).scrollTop() > tr\_top) \{  
                            tr.parent().append(newhead);  
                            newhead.addClass('fixedHead');  
                            var tds = $('tbody>tr:eq(1) td');  
                            newhead.find('th').each(function (i, e) \{  
                                $(e).attr('width', tds.eq(i).width());  
                            \});  
                        \} else \{  
                            newhead.remove();  
                        \}  
                    \})  
                \}  
            \}  
        \});  
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，161人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery滚动监听，并且固定表头

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title

缺乏、安全感/ 2023年08月17日 15:44/ 0 赞/ 63 阅读

相关 java 表头固定_常用的固定表头的几种做法

这几天修改列表的样式风格，提到了列表表头的固定方法，总结一下常见的几种：第一种感觉最简单的就是分放在两个标签里，这样只控制不含有标题的那个，代码如下: <table>

本是古典何须时尚/ 2022年11月12日 02:49/ 0 赞/ 207 阅读

相关 html表头固定原理,表头固定(利用jquery实现原理介绍)

表头固定应该是一个用得比较多的功能，参考了网上几个例子，在几个常用浏览器下显示不是很完美。而且很多都是基于固定的表格，在编码时多写一个固定的表头，对于动态生成的不知道多少列的表

小灰灰/ 2022年10月05日 12:57/ 0 赞/ 219 阅读

相关 bootstrap中固定table的表头

前端时间鼓捣的一个简单的手机网站，今天又拿出来弄一弄因为主要是给手机访问，用的是bootstrap响应式布局，今天的任务是做一个数据展示页面但是由于数据的列比较多，所以

骑猪看日落/ 2022年08月13日 14:47/ 0 赞/ 164 阅读

相关 html固定表头

<style> .fixedHead \{ top: 0; position: fixed;

た入场券/ 2022年07月12日 06:25/ 0 赞/ 162 阅读

相关 html固定表头

<style> .fixedHead \{ top: 0; position: fixed;

- 日理万妓/ 2022年07月12日 06:25/ 0 赞/ 164 阅读

相关 table表头固定，内容可滚动问题

1.首先新建html页面body中写入： <div class="title_div" id="tdiv"> <table class="tit

偏执的太偏执、/ 2022年06月02日 01:12/ 0 赞/ 193 阅读

相关实现一个 AngularJS 的固定表头指令

1 前言在前端业务开发中经常需要在页面上创建一个内容超级多的 Table，用户操作时如果将页面滚动到页中就会导致不知道当前列的列头名称或者无法横向滚动到想找的列。针

你的名字/ 2022年05月31日 08:59/ 0 赞/ 197 阅读

相关 jquery 表格表头固定，表格滚动 ------gxy

实现了表头固定，表身滚动： -------------------- <div id="scroll_table" class="col-md-12 bottom_

约定不等于承诺〃/ 2022年05月28日 00:21/ 0 赞/ 327 阅读

相关 easyui datagrid表头 toolbar 固定

当用到EasyUI中的 datagrid 时，设置 fit:true, 就会使表头跟toolbar固定，但是这个容器要设置固定的宽和高。 ![format_png][] !

雨点打透心脏的1/2处/ 2021年08月26日 14:02/ 0 赞/ 595 阅读