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 ...
随机推荐
- 构建Maven项目
Maven(一)如何用Eclipse创建一个Maven项目 Maven学习总结(三)——使用Maven构建项目 Eclipse创建一个Maven Web项目 [项目管理和构建]十分钟教程,eclips ...
- mongodb和mysql语法对比
MySQL: SELECT * FROM user Mongo: db.user.find() —————————————— MySQl: SELECT * FROM user WHERE name ...
- eclipse编译Jmeter源码
1.在apache官网下载源码和安装包 http://jmeter.apache.org/ 2. 解压 解压安装包和源码包, 将安装包apache-jmeter-3.3 里lib ...
- FlashkUI v1.33 发布（提供移动设备支持）
v1.33 Beta更新内容:增加对移动设备的支持,新增自定义双渲染器双层树组件.List增加按数据子项排序功能. <ignore_js_op> 介绍: Flex已经不作为Adobe官方支 ...
- 带着问题看 react-redux 源码实现
前言 Redux作为通用的状态管理器,可以搭配任意界面框架.所以并搭配react使用的话就要借助redux官方提供的React绑定库react-redux,以高效灵活的在react中使用redux.下 ...
- React 从入门到进阶之路（六）
之前的文章我们介绍了 React 表单事件 键盘事件 事件对象以及 React中 的 ref 获取 dom 节点 .双向数据绑定.接下来我们将介绍 React 表单详解 约束性和非约束性组件 inpu ...
- java后台杂记
1.在@Select使用动态SQL有 "<=" 时要转义:<![CDATA[ <= ]]> 2.assert函数即断言,也即做出一些假设,程序运行时如果假设 ...
- 「今日 GitHub 趋势」让全世界程序员体会中国的 12306 抢票狂潮
[2018年1月7日 GitHub 趋势] No.1:yyx990803 / build-your-own-mint 单日 714 星 使用 Plaid,Google 表格和 CircleCI 构建您 ...
- 黑马MySQL数据库学习day01 安装多个版本MySQL mysqld.exe工具
- ios wkwebview 跳转到新的controllerview加载页面 出现闪退问题
func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) { if(isF ...