方法一: 使用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的更多相关文章

  1. table表头thead固定

    <html> <head> <meta charset="utf-8"/> <script type="text/javascr ...

  2. 基于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 ...

  3. jQuery,Table表头固定插件chromatable存在的问题及解决办法

    在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...

  4. bootstrap table 实现固定悬浮table 表头并可以水平滚动

    在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...

  5. table表头固定问题

    table表头固定问题 原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法 表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...

  6. HTML table表头固定

    HTML table表头固定 说说我在最近项目中碰到的css问题吧,作为问题知识集合总结笔记: <!DOCTYPE html> <html> <head> < ...

  7. 固定table表头

    <style> #box{ height:214px; width:500px; overflow-y:auto;/** 必须,否则当表格数据过多时,不会产生滚动条,而是自动延长该div的 ...

  8. table中thead固定一直在最上面

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/boot ...

  9. Bootstrap表格中,thead固定,tbody有垂直滚动条

    1.html源码:这里的table是使用的vue写法,实际生成的表格和一个一个写的tr th td无异 <div class="panel-body no-padding"& ...

随机推荐

  1. pytorch 中的 split

    Pytorch中的split问题: 1.使用torch.nn.Conv2d中有个参数是groups会将输入的feature map分组,此处需要注意的一点是分组之后各组的feature map的cha ...

  2. CF1114E Arithmetic Progression

    给定一个打乱的等差数列,每次两种操作. 1.查询一个位置. 2.查询是否有比x大的数字. 一共60次操作. sol: 30次操作即可二分出首项. 剩下30次操作查询出30个位置然后两两做差取gcd即可 ...

  3. git clone项目

    1. 生成公钥和私钥 ssh-keygen 2. 将公钥添加到github或者gitlab上,一般github或者gitlab允许添加多个公钥,可能是考虑到用户使用不同的机器了吧,还是很贴心的. 3. ...

  4. http认证方式,工程部分实现

    学习过程中,被boss批评,要求去复习http协议,因此找了相关资料做成一个系列:对于http认证方式不清楚的可以参考我的上一篇文章 http认证方式https://www.cnblogs.com/j ...

  5. 2017-4-18/缓存、CDN

    1. 什么是缓存,为什么要用缓存? 缓存就是数据交换的缓冲区(称作Cache),是存贮数据(使用频繁的数据)的临时地方.当用户查询数据,首先在缓存中寻找,如果找到了则直接执行.如果找不到,则去数据库中 ...

  6. [contest 781] 9.6

    [contest 781] 9.6 - XJOI czx的温暖题... T1 军训

  7. node.js项目多环境配置

    配置多种场景 我们的系统是要在不同的环境下运行的,不同的环境可能是不同的端口号,不同的数据库地址,数据库用户和密码, 并且可能有的需要自动重启有的不需要自动重启. 我们在有一个配置的时候是无法满足这么 ...

  8. oracle in 函数

    IN操作符      select * from scott.emp where empno=7369 or empno=7566 or empno=7788 or empno=9999:      ...

  9. Express 路径请求及对应的获取路径形式

    req.query // GET /search?q=tobi+ferret req.query.q // => "tobi ferret" // GET /shoes?or ...

  10. Linux修改用户密码有效期

    linux默认用户的密码是永不过期的,但是出于安全考虑在企业环境中一般会要求设置过期日期:但有时要求90天就过期,在这种严柯条件下我们有可能想给某个或某些用户开设后门,延长其密码有效期. 一.用户密码 ...