方法一: 使用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"& ...

随机推荐

正睿 2018 提高组十连测 Day4 T3 碳
记'1'为+1,'0'为-1; 可以发现 pre[i],suf[i]分别为前/后缀和 a[i]=max(pre[l.....i]); b[i]=max(suf[i+1....r]); ans=max( ...
hdu 1542 Atlantis (线段树扫描线)
大意: 求矩形面积并. 枚举$x$坐标, 线段树维护$[y_1,y_2]$内的边是否被覆盖, 线段树维护边时需要将每条边挂在左端点上. #include <iostream> #inclu ...
使用scp上传和下载文件
利用scp传输文件 1.从服务器下载文件 scp username@servername:/path/filename /tmp/local_destination 例如scp codinglog@1 ...
[Codeforces Round #340 (Div. 2)]
[Codeforces Round #340 (Div. 2)] vp了一场cf..(打不了深夜的场啊!!) A.Elephant 水题,直接贪心,能用5步走5步. B.Chocolate 乘法原理计 ...
KM算法详解[转]
KM算法详解原帖链接:http://www.cnblogs.com/zpfbuaa/p/7218607.html#_label0 阅读目录二分图博客推荐匈牙利算法步骤匈牙利算法博客推荐 KM算 ...
JavaScript构造函数详解
构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象. 构造函数注意事项: 1.默认函数首字母大写 2.构造函数并没有显示返回任何东西.new 操作符会自动创建给定的类型并返 ...
Vue中 computed 和 methods的区别
涉及到计算部分的时候,计算属性是基于它们的依赖进行缓存的,如果说值不变,那么它就不会去重新执行,只有当值发生了改变,它才会去重新执行一次,其它时候它都是缓存的.而方法则会反复计算处理.二者之间的差距就 ...
苹果手机 disabled 的背景颜色没有
解决方案 .class disabled{ background-color: rgb(235, 235, 228); opacity:1}
【SQL】glob 和 like 的区别
LIKE 和 GLOB 都可以用来匹配通配符指定模式的文本值.如果搜索表达式与模式表达式匹配,LIKE 运算符将返回真(true),也就是 1 区别: (1)使用的通配符不一样 like: 百分号( ...
Android 音视频深入五完美的录视频(附源码下载)
本篇项目地址,名字是录视频,求star https://github.com/979451341/Audio-and-video-learning-materials 这一次的代码录视频在各个播放器都 ...

table 表头固定 thead固定. 1) 使用jquery.freezeheader.js