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 ...
随机推荐
- Kafka入门之生产者消费者
一.Kafka安装与使用 ( kafka介绍 ) 1. 下载Kafka 官网 http://kafka.apache.org/ 以及各个版本的下载地址 http://archive.ap ...
- TypeScript完全解读(26课时)_11.TypeScript完全解读-类型推论和兼容性
11.TypeScript完全解读-类型推论和兼容性 在一些时候省略指令,ts会帮我们推断出省略的类型的地方适合的类型,通过学习ts的类型推论了解ts的推论规则 类型兼容性就是为了适应js灵活的特点, ...
- Flutter实战视频-移动电商-34.列表页_小BUG的修复
34.列表页_小BUG的修复 当高粱酒的子类没有数据返回的时候就会报错. 解决接口空数据报错的问题 没有数据的时候,给用户一个友好的提示, 我们没有数据的时候还要告诉用户,提示一下他没有数据,在我们的 ...
- OGNL和类型转换
转载 JavaWeb -- Struts 数据传输:OGNL和类型转换 1. 数据传输:OGNL和类型转换 OGNL和struts2 OGNL:Object-Graph Navigation Lang ...
- Linux环境下Nginx及负载均衡
Nginx 简介 Nginx 是一个高性能的 HTTP 和反向代理 Web 服务器,同时也提供了 IMAP/POP3/SMTP 服务.前向代理作为客户端的代理,服务端只知道代理的 IP 地址而不知道客 ...
- now code寒假练习赛2——处女座的砝码(找规律题+高精度题）
#include <bits/stdc++.h> #define ll long long using namespace std; int main() { long double n ...
- tinyxml一些应注意的问题
今天在对使用tinyxml库的程序调试的时候,出现的一些问题让人很纠结,特记以此... 在对TixmlDocument创建时我是用new创建的,然后在用完之后我用delete释放掉,可是用gdb调试 ...
- lightoj刷题日记
提高自己的实力, 也为了证明, 开始板刷lightoj,每天题量>=1: 题目的类型会在这边说明,具体见分页博客: SUM=54; 1000 Greetings from LightOJ [简单 ...
- ugui mask失效
android平台 PlayerSettings-Resolution and Presentation-DisableDepth and Stencil这项勾选,mask失效
- JQuery | trigger() 方法
trigger() 方法触发被选元素的指定事件类型. 语法格式: trigger(type,[data]) type:触发事件类型 [data]:可选项,表示在触发事件时传递给函数的附加参数. 实例: ...