table 表头固定 thead固定. 1) 使用jquery.freezeheader.js
方法一: 使用jquery.freezeheader.js 固定表头:
1-: 初始化:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格table固定thead表头</title>
<style type="text/css"> table {
border: 1px solid red;
border-collapse: collapse; width: 500px; }
tr, td {
border: 1px solid black;
padding: 20px;
} thead {
background-color: red;
} tfoot {
background-color: green;
} </style> <!-- 引入js文件 -->
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.freezeheader.js"></script>
</head>
<body> <div style="height: 400px; width: 500px; background-color: #ccc; margin-bottom: 40px;"></div> <table id="tableid">
<thead>
<tr>
<td>表头一</td>
<td>表头二</td>
</tr>
</thead> <tfoot>
<tr>
<td colspan="2" style="text-align: center;">这是表尾</td>
</tr>
</tfoot> <tbody>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr>
<td>单元格2-2</td>
<td>单元格2-2</td>
</tr>
<tr>
<td>单元格3-1</td>
<td>单元格3-2</td>
</tr> <tr>
<td>单元格4-1</td>
<td>单元格4-2</td>
</tr>
<tr>
<td>单元格5-1</td>
<td>单元格5-2</td>
</tr>
<tr>
<td>单元格6-1</td>
<td>单元格6-2</td>
</tr> <tr>
<td>单元格7-1</td>
<td>单元格7-2</td>
</tr>
<tr>
<td>单元格8-1</td>
<td>单元格8-2</td>
</tr>
<tr>
<td>单元格9-1</td>
<td>单元格9-2</td>
</tr> </tbody> </table> <script type="text/javascript"> $(document).ready(function () {
$("#tableid").freezeHeader();
})
</script> </body>
</html>
显示:
2- 使用 jquery.freezeheader.js
第一: 引入js 文件:
实例化方法一: Create a table with fixed header in the top browser: 相对于浏览器 头部定位.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格table固定thead表头</title>
<style type="text/css"> table {
border: 1px solid red;
border-collapse: collapse; width: 500px; }
tr, td {
border: 1px solid black;
padding: 20px;
} thead {
background-color: red;
} tfoot {
background-color: green;
} </style> <!-- 引入js文件 -->
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.freezeheader.js"></script>
</head>
<body> <div style="height: 400px; width: 500px; background-color: #ccc; margin-bottom: 40px;"></div> <table id="tableid">
<thead>
<tr>
<td>表头一</td>
<td>表头二</td>
</tr>
</thead> <tfoot>
<tr>
<td colspan="2" style="text-align: center;">这是表尾</td>
</tr>
</tfoot> <tbody>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr>
<td>单元格2-2</td>
<td>单元格2-2</td>
</tr>
<tr>
<td>单元格3-1</td>
<td>单元格3-2</td>
</tr> <tr>
<td>单元格4-1</td>
<td>单元格4-2</td>
</tr>
<tr>
<td>单元格5-1</td>
<td>单元格5-2</td>
</tr>
<tr>
<td>单元格6-1</td>
<td>单元格6-2</td>
</tr> <tr>
<td>单元格7-1</td>
<td>单元格7-2</td>
</tr>
<tr>
<td>单元格8-1</td>
<td>单元格8-2</td>
</tr>
<tr>
<td>单元格9-1</td>
<td>单元格9-2</td>
</tr> </tbody> </table> <script type="text/javascript"> $(document).ready(function () {
$("#tableid").freezeHeader();
})
</script> </body>
</html>
这个是相对浏览器 可视区域的头部定位的.
如果我们将浏览器的高度减少.
1)初始
2) 移动中:
3)一直移动到 <table>中的 <thead>接触到浏览器的顶部, 此时 <thead>中的部分固定 fixed, <tbody>中的内容可以移动.
实例方法二: Create a table with fixed header and scroll bar: 创建一个固定高度的表格, 且有滚动条.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格table固定thead表头</title>
<style type="text/css"> table {
border: 1px solid red;
border-collapse: collapse; width: 500px; }
tr, td {
border: 1px solid black;
padding: 20px;
} thead {
background-color: red;
} tfoot {
background-color: green;
} </style> <!-- 引入js文件 -->
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.freezeheader.js"></script>
</head>
<body> <div style="height: 400px; width: 500px; background-color: #ccc; margin-bottom: 40px;"></div> <table id="tableid">
<thead>
<tr>
<td>表头一</td>
<td>表头二</td>
</tr>
</thead> <tfoot>
<tr>
<td colspan="2" style="text-align: center;">这是表尾</td>
</tr>
</tfoot> <tbody>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr>
<td>单元格2-2</td>
<td>单元格2-2</td>
</tr>
<tr>
<td>单元格3-1</td>
<td>单元格3-2</td>
</tr> <tr>
<td>单元格4-1</td>
<td>单元格4-2</td>
</tr>
<tr>
<td>单元格5-1</td>
<td>单元格5-2</td>
</tr>
<tr>
<td>单元格6-1</td>
<td>单元格6-2</td>
</tr> <tr>
<td>单元格7-1</td>
<td>单元格7-2</td>
</tr>
<tr>
<td>单元格8-1</td>
<td>单元格8-2</td>
</tr>
<tr>
<td>单元格9-1</td>
<td>单元格9-2</td>
</tr> </tbody> </table> <script type="text/javascript"> $(document).ready(function () {
$("#tableid").freezeHeader({ 'height': '300px' });
})
</script> </body>
</html>
创建的 表格的高度是 300px, 超出的 部分是滚动条显示.
移动:
------------
如果给定的 长度 超过表格原始的长度. 那么滚动条也会这么长.
实例方法三: Create a table with fixed header and offset: thead是 相对 浏览器头部向下 偏移 多少像素.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格table固定thead表头</title>
<style type="text/css"> table {
border: 1px solid red;
border-collapse: collapse; width: 500px; }
tr, td {
border: 1px solid black;
padding: 20px;
} thead {
background-color: red;
} tfoot {
background-color: green;
} </style> <!-- 引入js文件 -->
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.freezeheader.js"></script>
</head>
<body> <div style="height: 400px; width: 500px; background-color: #ccc; margin-bottom: 40px;"></div> <table id="tableid">
<thead>
<tr>
<td>表头一</td>
<td>表头二</td>
</tr>
</thead> <tfoot>
<tr>
<td colspan="2" style="text-align: center;">这是表尾</td>
</tr>
</tfoot> <tbody>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr>
<td>单元格2-2</td>
<td>单元格2-2</td>
</tr>
<tr>
<td>单元格3-1</td>
<td>单元格3-2</td>
</tr> <tr>
<td>单元格4-1</td>
<td>单元格4-2</td>
</tr>
<tr>
<td>单元格5-1</td>
<td>单元格5-2</td>
</tr>
<tr>
<td>单元格6-1</td>
<td>单元格6-2</td>
</tr> <tr>
<td>单元格7-1</td>
<td>单元格7-2</td>
</tr>
<tr>
<td>单元格8-1</td>
<td>单元格8-2</td>
</tr>
<tr>
<td>单元格9-1</td>
<td>单元格9-2</td>
</tr> </tbody> </table> <script type="text/javascript"> $(document).ready(function () {
$("#tableid").freezeHeader({'offset' : '51px'})
.on("freeze:on", function( event ) {
//do something
}).on("freeze:off", function( event ) {
//do something
});
})
</script> </body>
</html>
效果:
继续移动:
这种用法有什么 用处?
这种用法适用于 页面中本身已经有一个 fixed的页面 头部, 此时就可以设置 offset的值就是 fixed的页面头部的高度; 这样 表头就会一直显示在 页面头部的下面.
移动:
自己的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格table固定thead表头</title>
<style type="text/css"> * {
padding: 0px;
margin: 0px;
} table {
border: 1px solid red;
border-collapse: collapse; width: 500px; }
tr, td {
border: 1px solid black;
padding: 20px;
} thead {
background-color: red;
} tfoot {
background-color: green;
} .footer {
width: 500px;
height: 100px;
background-color: yellow;
text-align: center;
/*margin-bottom: 100px;*/ position: fixed;
} </style> <!-- 引入js文件 -->
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.freezeheader.js"></script>
</head>
<body> <div class="footer">这是fixed的头部</div> <!-- 用来填充fixed的空间 -->
<div style="height:100px;"></div> <div style="height: 400px; width: 500px; background-color: #ccc; margin-bottom: 40px; margin-top: 40px;"></div> <table id="tableid">
<thead>
<tr>
<td>表头一</td>
<td>表头二</td>
</tr>
</thead> <tfoot>
<tr>
<td colspan="2" style="text-align: center;">这是表尾</td>
</tr>
</tfoot> <tbody>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr>
<td>单元格2-2</td>
<td>单元格2-2</td>
</tr>
<tr>
<td>单元格3-1</td>
<td>单元格3-2</td>
</tr> <tr>
<td>单元格4-1</td>
<td>单元格4-2</td>
</tr>
<tr>
<td>单元格5-1</td>
<td>单元格5-2</td>
</tr>
<tr>
<td>单元格6-1</td>
<td>单元格6-2</td>
</tr> <tr>
<td>单元格7-1</td>
<td>单元格7-2</td>
</tr>
<tr>
<td>单元格8-1</td>
<td>单元格8-2</td>
</tr>
<tr>
<td>单元格9-1</td>
<td>单元格9-2</td>
</tr> </tbody> </table> <script type="text/javascript"> $(document).ready(function () {
$("#tableid").freezeHeader({'offset' : '100px'})
.on("freeze:on", function( event ) {
//do something
}).on("freeze:off", function( event ) {
//do something
});
})
</script> </body>
</html>
显示:
移动:
继续移动:
事件处理:
freeze:on 表示 当 tobody 滚动的时候触发的事件
freeze:off 表示 当 tobody 不滚动的时候触发的事件.
<script type="text/javascript">
$(document).ready(function () {
$("#tableid").freezeHeader({'offset' : '100px'})
.on("freeze:on", function( event ) {
//do something
console.log("freeze:on");
console.log("freeze:on-event", event);
}).on("freeze:off", function( event ) {
//do something
console.log("freeze:off");
console.log("freeze:off-event", event);
});
})
</script>
参考链接:
table表头thead固定
jquery.freezeheader
freezeheader DEMO
<
table 表头固定 thead固定. 1) 使用jquery.freezeheader.js的更多相关文章
- table表头thead固定
<html> <head> <meta charset="utf-8"/> <script type="text/javascr ...
- 基于jquery类库的绘制二维码的插件jquery.qrcode.js
jquery.qrcode.min.js 如下 (function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.d ...
- jQuery,Table表头固定插件chromatable存在的问题及解决办法
在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...
- bootstrap table 实现固定悬浮table 表头并可以水平滚动
在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...
- table表头固定问题
table表头固定问题 原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法 表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...
- HTML table表头固定
HTML table表头固定 说说我在最近项目中碰到的css问题吧,作为问题知识集合总结笔记: <!DOCTYPE html> <html> <head> < ...
- 固定table表头
<style> #box{ height:214px; width:500px; overflow-y:auto;/** 必须,否则当表格数据过多时,不会产生滚动条,而是自动延长该div的 ...
- table中thead固定一直在最上面
<link rel="shortcut icon" href="favicon.ico"> <link href="css/boot ...
- Bootstrap表格中，thead固定，tbody有垂直滚动条
1.html源码:这里的table是使用的vue写法,实际生成的表格和一个一个写的tr th td无异 <div class="panel-body no-padding"& ...
随机推荐
- 1.2 面向对象 Object-oriented
前导课程 1.UML(统一建模语言) 2.OOAD Concept(Object-oriented Analysis and Design 概念) 3.Design Pattern(设计模式) 4.面 ...
- github第一步之初始化操作
目录 0.首先注册一个账号 1.创建知识库Repository 2.创建一个分支branch--feature 3.制作并提交commit 4.打开拉取请求pull 5.合并自己的pull请求 git ...
- 02 Vue之vue对象属性功能&axios数据请求实现
1.过滤器的声明和使用 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 1 使用Vue.filter()进行全局定义 2 在v ...
- Matlab-1:jacobi迭代法工具箱
function [u,n]=Jacobi(A,b,u0,eps,varargin) %Jacobi.m函数为用于雅可比迭代法求解线性方程组 %A为线性方程组的系数矩阵 %b为线性方程组的常数向量 % ...
- 【Oracle】【6】去掉字符串最后一个特殊字符
--去除字符串末尾的省字,若无省字则无变化 SELECT DISTINCT TRIM('省' FROM PROVINCE) PROVINCE FROM ADDRESS 参考博客: 1,使用oracle ...
- 【转】分享前端开发中通过js设置/获取cookie的一组方法
在前端开发中,通常都需要获取并记录用户的某些操作设置,这样可以使用户下一次访问网站时不用进行重复的调整设置同一个功能. js方法的完整代码如下: var cookie = { set:function ...
- The Doors
The Doors You are to find the length of the shortest path through a chamber containing obstructing w ...
- 安天透过北美DDoS事件解读IoT设备安全——Mirai的主要感染对象是linux物联网设备，包括：路由器、网络摄像头、DVR设备，入侵主要通过telnet端口进行流行密码档暴力破解，或默认密码登陆，下载DDoS功能的bot，运行控制物联网设备
安天透过北美DDoS事件解读IoT设备安全 安天安全研究与应急处理中心(安天CERT)在北京时间10月22日下午启动高等级分析流程,针对美国东海岸DNS服务商Dyn遭遇DDoS攻击事件进行了跟进分析. ...
- kali-rolling安装nessus 7并创建扫描任务教程
一.下载 下载页面:https://www.tenable.com/downloads/nessus 如果自己安装的kali是32位的则选择上边的32位版本下载 二.安装 直接用dpkg安装即可: d ...
- 【转】Netty之解决TCP粘包拆包(自定义协议)
1.什么是粘包/拆包 一般所谓的TCP粘包是在一次接收数据不能完全地体现一个完整的消息数据.TCP通讯为何存在粘包呢?主要原因是TCP是以流的方式来处理数据,再加上网络上MTU的往往小于在应用处理的消 ...