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

最新推荐文章于 2024-07-25 11:26:35 发布
最新推荐文章于 2024-07-25 11:26:35 发布
阅读量880 收藏 1
点赞数
分类专栏： 前端 文章标签： 基因表达 P值 log2FC 聚类 基因名
版权声明：本文为博主原创文章，遵循 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
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrapt 表格自适应_好用的自适应表格插件-bootstrap table （支持固定表头）
weixin_35070219的博客
12-30 806
最近工作中找到了一款十分好用的表格插件，不但支持分页，样式，搜索，事件等等表格插件常有的功能外，最主要的就是他自带的冻结表头功能，让开发制作表格十分容易，不过网上大多都是英文文档，第一次使用会比较麻烦，因此在此记录一些简单的使用方式，方便扩展学习首先是简单的页面形式，大家可以按照平常画表格的方式来创建html表格，然后通过js控制特殊的样式等操作(优点是表格更加直观，方便调整表格样式等，速度快)当...
bootstrap-table固定表头，同时适配高度，兼容ie，checkbox，固定列解决方案(续)
weixin_37620246的博客
08-24 2275
bootstrap-table固定表头，同时适配高度，兼容ie，checkbox，固定列解决方案(续)前文链接：bootstrap-table固定表头，同时适配高度，固定列解决方案上篇本人对 懒得安分 的技术进行改造，得到的一个初始版js插件，此大神的原文： JS组件系列——自己动手扩展BootstrapTable的 冻结列 功能：彻底解决高度问题在实战中，bug频频出现，如兼容性不解决，当点击b
ElementUI表格el-table表头固定自适应高度解决方案
热门推荐
web前端开发
01-06 1万+
来源 |https://wintc.top/article/54ElementUI、iView都以相同的方式提供了表格组件表头固定的方法，即设置组件的height属性。表头固定很重要，...
vue3 el-table多级表头收缩扩展的实现
weianl的博客
07-30 3284
最近在做一些数据展示类型的项目，其中有一个表格需求把我吓懵了，大概是这样的，表格的每一行数据可能会有子集，父级行要与子集行用颜色区分开来，这个好处理，el-table给我们提供了树形数据与懒加载来处理每一行存在层级的关系，行的颜色可以用table-属性的来动态绑定颜色；另外是表头，表头有多级，这个官网的多级表头有，除此之外一个多级表头可能还会有子集，并且需要收缩扩展和颜色区分，颜色区分可以用table-属性的提示。......
alter table add column多个字段_ElementUI表格el-table表头固定自适应高度解决方案
weixin_39633090的博客
11-21 321
一、前言ElementUI、iView都以相同的方式提供了表格组件表头固定的方法，即设置组件的height属性。表头固定很重要，就在于当表格数据项很多时，滚动条出现在表格组件内，而不是出现在表格组件外——这样的优点在于，滚动浏览数据项时，表头不发生滚动而永远在可视区域，数据项的字段名可以一直看到。 el-table的height属性可以方便地实现表格固定，但是这个值该设置为多少以适...
el-table二次封装 支持复选框表格嵌套 复杂类型表头等
baiyang_428的博客
12-21 757
二次封装el-table，复选框表格嵌套
html表格展开收缩,HTML 自动伸缩的表格Table js实现
weixin_32260275的博客
05-31 857
HTML 自动伸缩的表格Table js实现发布于 2016-12-16 09:23:59 | 105 次阅读 | 评论: 0 | 来源: 网友投递JavaScript客户端脚本语言Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的...
奥利奥-react.js高级用法
m0_70846476的博客
05-21 344
目录1. 高阶组件定义优点使用案例HOC 知名的应⽤案例：2. react hooks(v16.8新加的特性)增加hook的原因useStateuseEffectHook规则自定义hookuseRef[其他Hook API索引](https://react.docschina.org/docs/hooks-reference.html)3. 异步组件示例(异步组件+展位)实现一个异步组件lazy 1. 高阶组件 定义 把组件作为参数，并返回（高阶）组件的函数，称为高阶组件 优点 代码复⽤，状态/逻辑抽象
纯CSS（基于CSS3）实现表格固定行列（附：样式与JS配置实现固定列行）
timfeng2009的专栏
09-09 2624
方法一、CSS3（position:sticky）实现固定行与列 这个是我正在使用的固定行列的方式，使用的新最的CSS3样式：position:sticky。 感觉上去这个样式与position:fixed非常像。 差异在两个地方：1、但是fixed是相对于body元素，而sticky是相对于（第一个定位不为static的）父级容器；2、虽然已经定位position起来了，但是仍然还是在原来...
javascript 表格排序和表头浮动效果(扩展SortTable)
10-30
**表格排序**是网页中常用的一种交互功能，它允许用户通过点击表头来根据某一列的数据进行升序或降序排列。...开发者可以根据实际需求选择合适的版本，并利用其灵活性进行扩展和定制，以满足各种复杂的表格应用场景。
纯JS固定表头列头已经可变单元格
01-04
"纯JS固定表头列头已经可变单元格"这个项目是专门解决在网页中实现动态表格的一个解决方案，它允许用户在滚动页面时保持表头和列头可见，提供更好的用户交互体验。下面我们将深入探讨这个主题，讲解如何利用...
jQuery表格顶部与左右两侧固定滚动代码
06-10
`js`文件夹可能包含实现固定滚动逻辑的JavaScript代码；`css`文件夹则包含用于设置表格样式的CSS文件。通过这些文件的结合，我们可以构建出一个具备顶部和两侧固定滚动功能的表格。开发者可以根据自身项目需求，对...
js固定表格行列
09-13
5. **兼容性和响应式设计**：由于不同的浏览器对CSS和JavaScript的支持程度不同，固定表格行列的实现需要考虑到跨浏览器兼容性问题。同时，随着移动设备的普及，响应式设计也变得至关重要。需要确保在不同设备和屏幕...
jQuery实现表头固定效果的实例代码
10-27
首先，我们需要创建一个 JavaScript 文件，例如 `jQuery_FixedTableHead.js`，并在其中编写实现表头固定的函数。在这个例子中，我们定义了一个名为 `CloneTableHeader` 的 jQuery 扩展方法。这个方法接受两个参数：`...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3277
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
[HTML]一文掌握
CSDN20221005的博客
07-21 983
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
柯晓楠
07-24 695
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 1925
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
利用jQuery实现表头固定的方法汇总
在开发后台界面时，遇到表格数据量大导致页面拉长的问题，为了提升用户体验，固定表头成为一项重要需求。本文将介绍三种基于jQuery实现的表头固定方法。 首先，我们采用jQuery UI插件来实现这一功能。这种方法利用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值