js固定表格表头（高扩展性）

最新推荐文章于 2024-08-13 08:09:12 发布
最新推荐文章于 2024-08-13 08:09:12 发布
阅读量903 收藏 1
点赞数
分类专栏： 前端 文章标签： html javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36608036/article/details/124505112
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .nomal_table_wrap{
            margin-top: 20%;
            max-height: 400px;
            width: 600px;
            overflow:auto;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="nomal_table_wrap">
	<table>
            <thead>
                <tr>
                    <th>Pvalue</th>
                    <th>avg_log2FC</th>
                    <th>PC_1</th>
                    <th>PC_2</th>
                    <th>pvalue_adjust</th>
                    <th>Cluster</th>
                    <th>Gene</th>
                </tr>
            </thead>
            <tbody>
                <tr style="">
                    <td>0.0</td>
                    <td>1.0440443913178</td>
                    <td>0.919</td>
                    <td>0.688</td>
                    <td>0.0</td>
                    <td>0</td>
                    <td>Ccl6</td>
                </tr>
                <tr style="">
                    <td>3.6769078919568776e-289</td>
                    <td>0.425226842127117</td>
                    <td>0.924</td>
                    <td>0.6809999999999999</td>
                    <td>7.3538157839137455e-286</td>
                    <td>0</td>
                    <td>Ifitm6</td>
                </tr>
                <tr style="">
                    <td>1.2978826219166792e-279</td>
                    <td>0.621879312333146</td>
                    <td>0.93</td>
                    <td>0.642</td>
                    <td>2.595765243833369e-276</td>
                    <td>0</td>
                    <td>Mmp9</td>
                </tr>
                <tr style="">
                    <td>9.708758725898096e-263</td>
                    <td>0.7025738550516939</td>
                    <td>0.9440000000000001</td>
                    <td>0.69</td>
                    <td>1.941751745179619e-259</td>
                    <td>0</td>
                    <td>Hp</td>
                </tr>
                <tr style="">
                    <td>1.3321264919333692e-213</td>
                    <td>0.36503651446095203</td>
                    <td>0.772</td>
                    <td>0.534</td>
                    <td>2.6642529838667285e-210</td>
                    <td>0</td>
                    <td>Ly6g</td>
                </tr>
                <tr style="">
                    <td>1.1899389853453497e-160</td>
                    <td>0.44984695722058504</td>
                    <td>0.6</td>
                    <td>0.392</td>
                    <td>2.379877970690689e-157</td>
                    <td>0</td>
                    <td>Tnfaip6</td>
                </tr>
                <tr style="">
                    <td>2.0442629031150496e-141</td>
                    <td>0.361024169105155</td>
                    <td>0.968</td>
                    <td>0.7390000000000001</td>
                    <td>4.0885258062300996e-138</td>
                    <td>0</td>
                    <td>Pglyrp1</td>
                </tr>
                <tr style="">
                    <td>9.029976209358908e-132</td>
                    <td>0.874864750429788</td>
                    <td>0.588</td>
                    <td>0.40700000000000003</td>
                    <td>1.8059952418717797e-128</td>
                    <td>0</td>
                    <td>2010005H15Rik</td>
                </tr>
                <tr style="">
                    <td>2.908606449302709e-129</td>
                    <td>1.1538669448128798</td>
                    <td>0.813</td>
                    <td>0.7120000000000001</td>
                    <td>5.817212898605418e-126</td>
                    <td>0</td>
                    <td>Cxcl3</td>
                </tr>
                <tr style="">
                    <td>3.2702945292170992e-124</td>
                    <td>1.17055205604369</td>
                    <td>0.723</td>
                    <td>0.5660000000000001</td>
                    <td>6.540589058434208e-121</td>
                    <td>0</td>
                    <td>Gm5483</td>
                </tr>
                <tr style="">
                    <td>3.423654043287389e-114</td>
                    <td>0.782310170841121</td>
                    <td>0.556</td>
                    <td>0.376</td>
                    <td>6.84730808657479e-111</td>
                    <td>0</td>
                    <td>Csf3</td>
                </tr>
                <tr style="">
                    <td>7.701484507342318e-94</td>
                    <td>0.59063513184087</td>
                    <td>0.821</td>
                    <td>0.665</td>
                    <td>1.5402969014684598e-90</td>
                    <td>0</td>
                    <td>Il1a</td>
                </tr>
                <tr style="">
                    <td>4.5048697806101595e-90</td>
                    <td>0.29202088725208597</td>
                    <td>0.893</td>
                    <td>0.8009999999999999</td>
                    <td>9.009739561220318e-87</td>
                    <td>0</td>
                    <td>Ctsd</td>
                </tr>
                <tr style="">
                    <td>1.2299309120103197e-86</td>
                    <td>0.36780280857721</td>
                    <td>0.526</td>
                    <td>0.41200000000000003</td>
                    <td>2.4598618240206392e-83</td>
                    <td>0</td>
                    <td>Ereg</td>
                </tr>
                <tr style="">
                    <td>3.200747163318089e-84</td>
                    <td>0.43500581037004604</td>
                    <td>0.614</td>
                    <td>0.505</td>
                    <td>6.401494326636189e-81</td>
                    <td>0</td>
                    <td>Stfa2</td>
                </tr>
            </tbody>
        </tbale>
</div>

    <script>
        var dv = document.getElementsByClassName("nomal_table_wrap")[0];
        dv.children[0].children[0].style.backgroundColor =  "#ddd";
        dv.children[0].children[0].style.transform = 'translateY(-3px)';
        dv.onscroll = function(){
            var ofs = dv.scrollTop-3; //设置3px偏移量，不然表头会有可见滚动小缺口
            dv.children[0].children[0].style.transform = 'translateY(' + ofs +'px)';
        }
    </script>
</body>
</html>
awk_bioinfo
关注
专栏目录
js,HTML,表头固定，不用插件。
07-25
纯js和css完成表头的固定冻结。简单的几行代码便可以完成。
JS固定表头和左边列（最新源码）1.9
03-31
锁定表头及固定左边列，原生JS原创代码 需要注意的问题： 1.表格的宽度以及表格每一列的宽度需要固定（特殊情况除外：当表格列数少并且表格总宽度明显小于表格父容器的宽度时，也就是表格列不存在自动换行的问题） 2.表格父容器尺寸大小改变时，需要调用 setBoxSize 方法，目的是判断父容器是否出现滚动条 1.1 修正了对IE6、IE7的兼容问题 1.2 修正了固定行、列的样式问题 1.3 IE6/IE7浏览器 不启用该功能 1.4 增加了拆分线， 修正了重复生成锁定行列的问题以及生成错位的问题， 修正了行、列事件无法复制的问题， 增加了IE6/IE7/IE8 启用设置参数（ieLowVersionEnabled: true|false) ，默认不启用， 注：IE6/7/8锁定表头 由于兼容性问题，有些情况下会有一些错位的问题 1.5 增加了 显示/隐藏功能，修正了非IE浏览器下列宽错位问题 1.6 修正了当有合并单元格时，锁定单元格错位的问题，修正了表格行数较多时的性能问题 1.7 表格单元格可以不指定宽度（锁定时，取实际的单元格宽度），当单元格的左右两边的borderWidth不一样时，会有一些错位 若单元格宽度是固定的，可以在第3个参数(config)中指定 isFixedSize:true 修正表头列未锁定的Bug 1.8 修正表格含有thead时的样式丢失问题，以及行数设置问题，修正thead/tbody行归属问题 1.9 移除tbTopLeft的边框线 修正表格cellpadding/cellspacing的设置问题 修复Firefox下的padding导致的错位问题 修复thead复制没有底部分割线的问题 修复thead复制时无背景色的问题 增加复选框同步功能（如果是JS代码设置复选框选中，需要调用 .setCheckBoxSync()方法） .setCheckBoxSync 方法参数说明：4种参数 1) 复选框控件（html object）数组 2) 复选框控件（html object） 3) 复选框控件ID (string) 4) 空参数（尽量不用空参数）
js 固定表头
iteye_19878的博客
11-14 145
/********************************* ** 名称:JQeury实现表格行列冻结 ** ** 作者:杨积江 ** ** 时间:2114年4月16日 ** ** 联系:yangjijiang@sina.cn ** ** 描述:类似Excel中的冻结窗格功能.建议给出表头固定宽度,所有单元格的高度,指定表格宽度; *****************************...
固定表头表格（Fixed-Header-Table）使用教程
最新发布
gitblog_00958的博客
08-13 538
固定表头表格（Fixed-Header-Table）使用教程 Fixed-Header-TablejQuery plugin for tables with fixed headers 项目地址:https://gitcode.com/gh_mirrors/fi/Fixed-Header-Table 该项目【Fixed-Header-Table**】提供了一个简单的方法来实现具有固定头部和可滚动...
js固定表头
小码农大梦想
12-19 963
js固定表头 由于table的表头是js根据后台的数据直接动态拼接的html标签,所以Bootstrap的冻结表头用不了。 css代码片. #fixed_table #fix_tr1{ background: #FFFFFF; } #fixed_table #fix_tr2{ background: #...
js表头固定
qq_16618179的博客
09-16 474
<script type="text/javascript"> //表头固定 $(document).ready(function () { var topTable = $("table").eq(0).offset().top;//获取表格位置 var c_top = $('.oa-nav_top').height() ? $('....
javascript 表格排序和表头浮动效果(扩展SortTable)
10-30
**表格排序**是网页中常用的一种交互功能，它允许用户通过点击表头来根据某一列的数据进行升序或降序排列。...开发者可以根据实际需求选择合适的版本，并利用其灵活性进行扩展和定制，以满足各种复杂的表格应用场景。
纯JS固定表头列头已经可变单元格
01-04
"纯JS固定表头列头已经可变单元格"这个项目是专门解决在网页中实现动态表格的一个解决方案，它允许用户在滚动页面时保持表头和列头可见，提供更好的用户交互体验。下面我们将深入探讨这个主题，讲解如何利用...
js固定表格行列
09-13
5. **兼容性和响应式设计**：由于不同的浏览器对CSS和JavaScript的支持程度不同，固定表格行列的实现需要考虑到跨浏览器兼容性问题。同时，随着移动设备的普及，响应式设计也变得至关重要。需要确保在不同设备和屏幕...
Jquery表格添加滚动条插件，固定表头
07-27
总的来说，"Jquery表格添加滚动条插件，固定表头"这个主题涉及到前端开发中的DOM操作、事件处理、CSS样式和JavaScript插件使用。通过使用jQuery和相应的插件，我们可以提供更优秀的用户体验，使用户在浏览大数据量的...
jQuery表格顶部与左右两侧固定滚动代码
06-10
`js`文件夹可能包含实现固定滚动逻辑的JavaScript代码；`css`文件夹则包含用于设置表格样式的CSS文件。通过这些文件的结合，我们可以构建出一个具备顶部和两侧固定滚动功能的表格。开发者可以根据自身项目需求，对...
js table 固定表头
02-16
js table 固定表头
Html纯js固定表头、左侧首列
12-13
Html纯js固定表头、左侧首列，无须使用第三方插件
JS固定表头和左边列
04-10
原生JS写的表头固定及左边列固定功能，原创代码，代码比较简单，兼容IE8+、谷歌、火狐等主流浏览器，当前版本为1.7，此版本修正了性能问题，支持合并后的表格单元格，表格单元格可以不用设置宽度了。当表格总宽度设置不当时会有一些错位，单元格左右边框宽度不一样时，会有一些错位。
js固定表头和第一列固定
03-15
js固定表头和第一列固定 可托动，表头会跟着动，列下拉也会动，
Js实现表格头部第一行下拉固定
09-04
Js实现表格头部第一行下拉固定
js实现表头固定
javaStudentZhang的博客
06-10 7036
思路：一、table用div包裹，设置div的高度和滚动条，二、克隆table的表头，添加到div中，设为浮动，三、表头的top是滚动条的上方距离&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;test&lt;/title&amp
js表头固定实现思路汇总
chrisjingu的专栏
09-11 4443
关于表头固定，表内容滚动的实现，本人总结了3中实现思路，具体如下： 思路一 　　当发生滚动事件后，动态复制一份表头，将其放置在原表头的位置，为滚动的容器添加scroll事件，时刻保持复制表头的top=滚动容条的垂直位置($(obj).scrollTop()) 以下为demo代码实现： -CSS 实现 .table { width:240px; }
JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】
charlatans的博客
08-12 3811
本文主要介绍关于JS或Vue中如何进行表头，列固定，可以根据实际应用场景应用于原生，Vue，移动端，小程序中。实现逻辑：表头，列头，表格本身，这三个内容被分为了三块元素，将这三个内容进行抽离，并且通过定位和大盒子的包裹进行样式管理。【当要进行滚动时，只要对滚动事件进行绑定，让表头和列头显示对应的内容就完成了滚动的操作】下面有Vue组件的和JavaScript原生的代码，可以直接运行查看逻辑和效果。.........
GridView固定表头实例：横向滚动与纵向固定
这个实例展示了在ASP.NET环境中使用CSS和GridView控件属性实现表格固定表头、横向滚动和纵向固定的具体方法。开发者可以根据这个例子，结合自己的项目需求进行适当的修改和扩展，以适应不同的布局和样式要求。在实际...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值