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 ...
随机推荐
- 使用BFG清除git仓库中的隐私文件或大文件
使用git时间不长,在调机械臂项目的时候,由于对TwinCAT3和vs的机制不太了解,没有添加很好的忽略文件(.gitignore).造成git仓库包含了很多没有用的文件,例如vs的sdf文件,Twi ...
- HTML5资料整理 [From luics]
来自http://www.cnblogs.com/luics/,新浪微博@徐凯-鬼道 HTML5资料整理 项目组要做html5这块,花了一周左右时间收集的,快有一年时间了,部分内容需要更新,仅供参 ...
- 梦工厂实验室 取石子之fans 博弈
问题 D: 取石子之fans 时间限制: 1 Sec 内存限制: 64 MB提交: 57 解决: 26[提交][状态][讨论版] 题目描述 Yougth和Hrdv玩一个游戏,拿出n个石子摆成一圈, ...
- SqlServer2012——表
1.数据类型 数字类型:int,smallint, 高精度:decimal,numeric 日期和时间:datetime,smalldatetime 二进制:binary,varbinary,imag ...
- Channel的使用
Channel必须要通过buffer来读写 1. Channel需要通过IO流的getChannel()方法获取 2. buffer需要通过Channel的map()方法获取 package com. ...
- E20181029-hm
cardinality 基数 entity n. 实体; 实际存在物; 本质; distribute vt. 分配,散布; 散发,分发; 把…分类; [电] 配电; replica n. 复制品; ...
- Unity(1) 编辑器结构
5个主要视图视图,未完,持续补充... 1 Project(项目) 用于显示资源 Favorites:按资源分类显示 Assets:按目录结构显示 特殊说明 Prefabs(预设),用于场景中游戏对象 ...
- css定位-position
前言 定位的目的就是把元素摆放到指定的位置. 定位上下文:定位元素的大小,位置都是相对于定位上下文的. position属性值有5个值 static:所有有元素定位默认的初始值都是static.就是不 ...
- PJzhang:python基础入门的7个疗程-one
猫宁!!! 参考链接:易灵微课-21天轻松掌握零基础python入门必修课-售价29元人民币 https://www.liaoxuefeng.com/wiki/1016959663602400 安全从 ...
- ADO winform注册
前面我们了解了如何实现登录,现在.我们来讨论如何实现注册功能,注册其实就是 通过程序,往数据库中新增数据.首先我们同样连接到数据库,同上页一样创建连接,然后 打开连接.之后我们就要去获取我们输入到文本 ...