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 ...
随机推荐
- C语言--递归问题
1,一个经典的例子,理解递归过程的展开 #include<stdio.h> void func(int i){ ) func(i/); printf("%d",i) } ...
- Flutter实战视频-移动电商-26.列表页_使用Provide控制子类-2
26.列表页_使用Provide控制子类-2 主要实现功能,点击一级分类,二级分类跟着变.这里主要用哦我们的provide 新建provide provide文件夹下创建:child_category ...
- Oracle中的集合运算
前言:在实际项目中对多表进行集合运算使用非常广泛,以下是对集合操作的部分总结. 一,建表,插入测试数据 create table a( numbers integer ) create table b ...
- ASP.NET Response.Cookies
//设置cookie Response.Cookies["loginPage"].Value = "login.aspx"; //命名并给值 Response. ...
- E20180605-hm
arbitrary adj. 乱; 随意的,任性的,随心所欲的; 主观的,武断的; 霸道的,专制的,专横的,独断独行的; session n. 开会,会议; (法庭的) 开庭; 会期,学期; (进行某 ...
- 3DMAX 3场景制作
1 模型制作 2 UVW贴图展开 1 打开材质编辑器,给模型一个材质(以后应该以这个材质生成uvw展开,进而生成贴图,贴图绘制完毕后,再贴回这个材质中,就完成了给模型加贴图的操作) 2 在编辑面板中添 ...
- Codevs 1018 单词接龙
1018 单词接龙 2000年NOIP全国联赛普及组NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描 ...
- NOIP 2006 T2 金明的预算方案
题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过NN元钱就行”. ...
- 上传到git
https://blog.csdn.net/Lucky_LXG/article/details/77849212
- bzoj3427:[POI2013]BAJ-Bytecomputer
传送门 很显然有一个结论:最大不过1,最小不过-1 然后dp,设\(f[i][j]\)为满足前\(i\)个不下降,当前放的是\(j-2\),转移就比较好想了 具体方程看代码吧,终于有一个自己会写的题了 ...