Fixed table
废话不多说，直接代码。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery.js"></script>
<script src="./dist/jquery.fixed.table.js"></script>
<script src="./dist/index.js"></script>
<link rel="stylesheet/less" type="text/css" href="index.less" />
<script src="./node_modules/less/dist/less.js"></script>
</head> <body>
<div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead> <tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr><tr>
<td>张dddd三</td>
<td>25</td>
<td>3班</td>
<td>男</td>
<td>80</td>
</tr>
</tbody>
</table>
</div>
</body> </html>
*{
margin: 0px;
padding: 0px;
font-size: 14px;
font-family: '微软雅黑';
}
table{
border-collapse: collapse;
width: 100%;
}
table thead th{
font-weight: inherit;
}
table td, table th{
padding-left: 10px;
height: 40px;
line-height: 40px;
text-align: left;
}
table thead{
background-color: #05dfec;
color: white;
}
table tbody tr:hover, .fixed-table:hover, .fixed-table:hover div, table thead tr:hover{
background-color: #05c4d0;
}
div{
height: 100%;
overflow-y: scroll;
}
.fixed-table{
position: fixed;
left: 0px;
top: 0px;
right: 0px;
height: 40px;
overflow: hidden;
}
.fixed-table thead{
visibility: hidden;
}
.fixed-table div{
display: inline-block;
padding-left: 10px;
overflow: hidden;
background-color: #05dfec;
color: white;
height: 40px;
line-height: 40px;
}
$(document).ready(function () {
$('table').tables({fixedTop: 1});
});
(function($) {
$.fn.tables = function(options) {
var self = this;
this.options = options;
this.dom = $(this);
this.thead = this.dom.find('thead');
this.tbody = this.dom.find('tbody');
this.fixedTop = this.options.fixedTop;
this.dom.parent().scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop >= self.fixedTop) {
self.setFix();
} else {
self.clearFix();
}
});
this.setFix = function() {
if (this.dom.parent().find('.fixed-table').length) {
return;
}
this.dom.parent().prepend(`<div class="fixed-table">${this.getThead()}</div>`);
}
this.clearFix = function() {
this.dom.parent().find('.fixed-table').remove();
}
this.getThead = function() {
var headHtml = '';
this.thead.find('th').each(function () {
var _w = $(this).width();
var _v = $(this).text();
headHtml += `<div style="width: ${_w}px;">${_v}</div>`;
});
return headHtml;
}
this.onresize = function() {
this.thead.find('th').each(function () {
var _w = $(this).width();
var _i = $(this).index();
self.parent().find(`.fixed-table div:eq(${_i})`).width(_w);
});
}
$(window).resize(function () {
self.onresize();
});
}
})($);
效果：
Fixed table的更多相关文章
- 锁定表头和固定列(Fixed table head and columns)
源码: /// <summary> /// 锁定表头和列 /// <para> sorex.cnblogs.com </para> /// </summary ...
- table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。
找了好久才找到一篇可以简单粗暴就能用的,所以拿过来算是收藏了.里面有一个css2里的命令是我没用过的也是这里面关键的:table-layout:fixed; 原理很简单,有爱研究的童鞋可以去css官网 ...
- table 的thead th 固定 tbody滚动例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- table中超长字符串省略号表示两种方法
写在前面: 1.第一种从网上找到的解决方式添加table-layout:fixed 2.第二种添加div 3.字符串过长产生省略号的css语句为如下三种合用:overflow:hidden ...
- CSS 设置table下tbody滚动条
table tbody { display:block; height:195px; overflow-y:scroll; } table thead, tbody tr { display:tabl ...
- table问题汇总
平时要使用 table 的次数说多不多,说少不少,但每次使用必定会被几个问题"坑"一下,所以这篇博客用来记录下table那些"小坑".但 table 也会有很多 ...
- ORA-02030: can only select from fixed tables/views
有时候给一些普通用户授予查询系统对象(例如dynamic performance views)权限时会遇到"ORA-02030: can only select from fixed tab ...
- table中head表头固定，body滚动
<style type="text/css"> .table-head { background-color: #; color: #; } .table-body { ...
- CSS设置table下tbody滚动条与thead对齐的方法
<style>table tbody {display:block;height:195px;overflow-y:scroll;} table thead, tbody tr {disp ...
随机推荐
- 多线程之----定时器TIMER
结上一篇 多线程的简单介绍 http://www.cnblogs.com/duanxiaojun/p/6595847.html 在上一讲中我主要是对多线程学习这个系列做了一个大致的学习计划,然后对 ...
- WordCount作业提交到FileInputFormat类中split切分算法和host选择算法过程源码分析
参考 FileInputFormat类中split切分算法和host选择算法介绍 以及 Hadoop2.6.0的FileInputFormat的任务切分原理分析(即如何控制FileInputForm ...
- 4 pyspark学习---RDD
开始新的东西,其实很多操作在第二篇的时候就有所介绍啦.在这里继续学习一遍加深一下印象. 1关于RDD (1) RDD-----Resilient Distributed Dataset,弹性分布式数据 ...
- 20个Flutter实例视频教程-第07节: 毛玻璃效果制作
视频地址: https://www.bilibili.com/video/av39709290/?p=7 博客地址: https://jspang.com/post/flutterDemo.html# ...
- Flutter实战视频-移动电商-30.列表页_商品列表UI界面布局
30.列表页_商品列表UI界面布局 小程序里面的布局方式 小程序的图片上这里使用的是warp布局,因为首页里面火爆专区,已经用过了warp来布局了. 所以这里我们没有必要再讲一遍,这里我们使用List ...
- PHP实用小程序（三）
<HTML> <HEAD> <TITLE>给数组增加元素</TITLE> </HEAD> <? $Cities[] = "& ...
- 【原创】Gitbook使用
[常用命令] 1.gitbook install 安装依赖模块 2.gitbook build 编译,结果输出在_book文件夹下 3.gitbook serve 本机预览,默认端口为4000 [注意 ...
- C/C++内存检测工具Valgrind
内存检测Valgrind简介 Valgrind是运行在Linux上一套基于仿真技术的程序调试和分析工具,作者是获得过Google-O'Reilly开源大奖的Julian Seward, 它包含一个内核 ...
- 跟我学: 使用 fireasy 搭建 asp.net core 项目系列之三 —— 配置
==== 目录 ==== 跟我学: 使用 fireasy 搭建 asp.net core 项目系列之一 —— 开篇 跟我学: 使用 fireasy 搭建 asp.net core 项目系列之二 —— ...
- Pycharm 配置autopep8到菜单
Pycharm 可以自动检测PEP8规范. 我们可以安装autopep8来自动修改文件实现PEP8规范. 1.通过Pycharm安装autopep8 2.File->Setting->Ex ...