table表头和首列的表格固定-JQuery、js实现的Table表头固定

这个是最简单的方法，基于jQuery的解决方案,引入一个两个js就可以解决，当然也有使用css，
position: sticky，这个我下一章节会讲它的优缺点，当然为了凸显jQuery的优点，

我就说话使用css的缺点：

1.固定表头，和首列需要额外的html，结构复杂。

2.体验效果，响应式布局很难解决，几乎没有解决
，table固定了长宽，在其他页面会看到很别扭，影响美观。

3.遇到bug，如果你是后端开发就需要找前端一点一点调样式，后端噩梦，影响开发效率

现在开始介绍JQuery的思路：
步骤1：克隆元素
在我们开始之前，我们将要关闭表头，并声明一些变量

//声明屏幕、当前tablevar $ t = $（this），$ w = $（window），$ thead = $（this）.find（'thead'）.clone（），$ col = $（this）.find（'thead，tbody'）.clone（）;

步骤2：创建新表
步骤3：插入克隆后的表格内容
步骤4：通过scrollTop算滚动高度来显示新表
算了还是长话短说，不说原理了，具体js代码等下回帖出来，不懂的可以直接问我，直接看看怎么使用吧。

第一步引入js

jquery.stickyheader.js
//可以去这里下载自己重新创建一个
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>

第二步html中table结构

<table><thead><tr><!-- 固定表头是th里面的内容 --><th></th></tr></thead><tbody><tr><!-- 如果你需要列表的第一列也固定 --><!-- <th></th> 使用这种模式支持rowspan --><td></td></tr><!-- more rows are possible --></tbody></table>

css

.sticky-wrap {overflow-x: auto;position: relative;margin-bottom: 1.5em;width: 100%;
}
.sticky-wrap .sticky-thead,
.sticky-wrap .sticky-col,
.sticky-wrap .sticky-intersect {opacity: 0;position: absolute;top: 0;left: 0;transition: all .125s ease-in-out;z-index: 50;width: auto; /* Prevent table from stretching to full size */
}.sticky-wrap .sticky-thead {box-shadow: 0 0.25em 0.1em -0.1em rgba(0,0,0,.125);z-index: 100;width: 100%; /* Force stretch */}.sticky-wrap .sticky-intersect {opacity: 1;z-index: 150;}.sticky-wrap .sticky-intersect th {background-color: #666;color: #eee;}
.sticky-wrap td,
.sticky-wrap th {box-sizing: border-box;
}

第三步打开浏览器看效果吧

原文

在线演示1
在线演示2
在线演示3

jquery-throttle-debounce-plugin.js

(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);

jquery.stickyheader.js

 $('table').each(function() {if($(this).find('thead').length > 0 && $(this).find('th').length > 0) {// 克隆<thead>var $w    = $(window),$t     = $(this),$thead = $t.find('thead').clone(),$col   = $t.find('thead, tbody').clone();// Add class, remove margins, reset width and wrap table$t.addClass('sticky-enabled').css({margin: 0,width: '100%'}).wrap('<div class="sticky-wrap" />');if($t.hasClass('overflow-y')) $t.removeClass('overflow-y').parent().addClass('overflow-y');// Create new sticky table head (basic)$t.after('<table class="sticky-thead table" />');// If <tbody> contains <th>, then we create sticky column and intersect (advanced)if($t.find('tbody th').length > 0) {$t.after('<table class="sticky-col table" /><table class="sticky-intersect" />');}// Create shorthand for thingsvar $stickyHead  = $(this).siblings('.sticky-thead'),$stickyCol   = $(this).siblings('.sticky-col'),$stickyInsct = $(this).siblings('.sticky-intersect'),$stickyWrap  = $(this).parent('.sticky-wrap');$stickyHead.append($thead);$stickyCol.append($col).find('thead th:gt(0)').remove().end().find('tbody td').remove();$stickyInsct.html('<thead><tr><th>'+$t.find('thead th:first-child').html()+'</th></tr></thead>');// 设置宽度var setWidths = function () {$t.find('thead th').each(function (i) {$stickyHead.find('th').eq(i).width($(this).width());}).end().find('tr').each(function (i) {$stickyCol.find('tr').eq(i).height($(this).height());});// Set width of sticky table head$stickyHead.width($t.width());// Set width of sticky table col$stickyCol.find('th').add($stickyInsct.find('th')).width($t.find('thead th').width())},repositionStickyHead = function () {// Return value of calculated allowancevar allowance = calcAllowance();// Check if wrapper parent is overflowing along the y-axisif($t.height() > $stickyWrap.height()) {// If it is overflowing (advanced layout)// Position sticky header based on wrapper scrollTop()if($stickyWrap.scrollTop() > 0) {// When top of wrapping parent is out of view$stickyHead.add($stickyInsct).css({opacity: 1,top: $stickyWrap.scrollTop()});} else {// When top of wrapping parent is in view$stickyHead.add($stickyInsct).css({opacity: 0,top: 0});}} else {// If it is not overflowing (basic layout)// Position sticky header based on viewport scrollTopif($w.scrollTop() > $t.offset().top && $w.scrollTop() < $t.offset().top + $t.outerHeight() - allowance) {// When top of viewport is in the table itself$stickyHead.add($stickyInsct).css({opacity: 1,top: $w.scrollTop() - $t.offset().top});} else {// When top of viewport is above or below table$stickyHead.add($stickyInsct).css({opacity: 0,top: 0});}}},repositionStickyCol = function () {if($stickyWrap.scrollLeft() > 0) {// When left of wrapping parent is out of view$stickyCol.add($stickyInsct).css({opacity: 1,left: $stickyWrap.scrollLeft()});} else {// When left of wrapping parent is in view$stickyCol.css({ opacity: 0 }).add($stickyInsct).css({ left: 0 });}},calcAllowance = function () {var a = 0;// Calculate allowance$t.find('tbody tr:lt(3)').each(function () {a += $(this).height();});// Set fail safe limit (last three row might be too tall)// Set arbitrary limit at 0.25 of viewport height, or you can use an arbitrary pixel valueif(a > $w.height()*0.25) {a = $w.height()*0.25;}// Add the height of sticky headera += $stickyHead.height();return a;};setWidths();$t.parent('.sticky-wrap').scroll($.throttle(250, function() {repositionStickyHead();repositionStickyCol();}));$w.load(setWidths).resize($.debounce(250, function () {setWidths();repositionStickyHead();repositionStickyCol();})).scroll($.throttle(250, repositionStickyHead));}});

2018.7.13 又发现一个好插件，如果你用过datatable可以使用fixedheader来固定头部，使用fixedcolumns固定列
https://datatables.net/extensions/fixedheader/
2018.11.27 又发现一个插件
https://github.com/harryluo163/toutiao/tree/master/CSS实现的Table表头固定
http://47.105.36.188:3030/toutiao/CSS实现的Table表头固定/index.html
如果你遇到问题，可以加群315552185
一起交流哦！

table表头和首列的表格固定-JQuery、js实现的Table表头固定相关推荐

table表头和首列的表格固定-CSS实现的Table表头固定
效果就是上图表头是固定的, 跟随滑动轴动,左边第一列也是可以跟谁滑动轴滚动下面是代码原文是查看 <!DOCTYPE html> <html> <head> &l ...
微信小程序 table表格固定表头和首列右侧表格可以左右滚动（多种表格演练）
最近在做公司的项目需要到表格展示数据,但是微信小程序是没有原生table标签的,于是就百度各种搜...发现结构有类似的就粘过来修改,要善于学习和借鉴别人的经验使其变成为自己的东西,学无止境~ 在这里做 ...
el table 固定表头和首行_vue表格实现固定表头首列
前言最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...
table固定表头和首列
table固定表头和首列 html部分,结构上分为左右两部分,又分别拆开为上下两部分,总共四个结构部分,以下为固定首行和首列,需要固定多行多列的可以自行添加,如下列表中姓名为左上角固定不变的位置,可自 ...
纯CSS实现Table固定表头和首列
Table固定表头和首列这种需求应该比较常见.以往的做法,需要写一大堆脚本,而现在,可以使用position:sticky轻松实现这个效果. .table-container {width: 100% ...
安卓视线可锁定首行和首列的表格视图
如上图所示效果,整体视图构成已标记,联动效果通过两个CustomHorizontalScrollView的setOnScrollChangeListener方法绑定实现. 表格里面数据通过动态添加te ...
html表格table表头和首列固定
HTML的表格比安卓的表格简单很多,更适合做一些复杂的表格,下面是一种能将表格首列与表头固定,表格内容可滑动的表格,分享给大家. 主要 css 代码在 style 标签下,还有就是表格外层的div也设 ...
H5移动端滑动表格固定表头和首列（纯css实现）
HTML部分 <template><div class="contain"><table class=" ...
如何固定Excel的表头和列（滚动时始终显示表头和首列）
一.背景有的时候,有些Excel的行太多,或者列太多,我们希望往下滚动的时候表头始终展示,或者往右边滚动的时候首列始终展示,或者都终展示. 即如下: 这个是成绩表,科目很多,学生也很多,我们希望首行 ...

table表头和首列的表格固定-JQuery、js实现的Table表头固定

table表头和首列的表格固定-JQuery、js实现的Table表头固定相关推荐

最新文章

热门文章