table固定表头滚动

一、table固定表头滚动（不兼容IE）使用scrollTop监听滚动如下例

1、html

<div class="tabflow" id="flowtable-cont"><table><thead><tr><th>年度</th><th>起降架次(万架)</th><th>旅客吞吐(万人)</th><th>货邮吞吐(万吨)</th></tr></thead><tbody><tr><td>2011</td><td>512</td><td>600</td><td>376</td></tr><tr><td>2012</td><td>504</td><td>593</td><td>397</td></tr><tr><td>2013</td><td>562</td><td>562</td><td>381</td></tr><tr><td>2014</td><td>705</td><td>464</td><td>302</td></tr><tr><td>2015</td><td>784</td><td>443</td><td>374</td></tr><tr><td>2016</td><td>645</td><td>504</td><td>415</td></tr><tr><td>2017</td><td>534</td><td>534</td><td>432</td></tr><tr><td>2018</td><td>375</td><td>582</td><td>460</td></tr><tr><td>2019</td><td>397</td><td>621</td><td>442</td></tr></tbody></table>
</div>

2、css

.tabflow{width: 100%;height: 17vh;overflow: auto;display: none;}
.tabflow table{font-size: 0.14rem;color: #5a5a5a; width: 100%;}
.tabflow table tr{text-align: center;line-height: 0.25rem;border: 1px solid #f2f2f2;border-right: none;}
.tabflow table thead{background-color: #fff;}
.tabflow table tbody tr:nth-child(2n+1){background-color: #f2f2f2;}
.tabflow table tbody tr td{font-size: 0.125rem;}

3、js

window.onload = function(){var tableflow = document.querySelector('#flowtable-cont');   //获取table元素　　 function scrollHandle (e){console.log(this)var scrollTop = this.scrollTop;this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';}tableflow.addEventListener('scroll',scrollHandle);   //监听scroll事件
}

二、table固定表头滚动（兼容IE）更改css，设置固定宽度

css

.tabflow{width: 100%;height: 17vh;display: none;}
.tabflow table{font-size: 0.14rem;color: #5a5a5a; width: 100%;position: relative;}
.tabflow table tr{text-align: center;line-height: 0.25rem;border: 1px solid #f2f2f2;border-right: none;}
.tabflow table thead{background-color: #fff;position: fixed;z-index: 3;}
.tabflow table thead tr th{width: 1.2rem;}
.tabflow table thead tr th:first-child{width: 0.4rem;}
.tabflow table tbody{top: 0.25rem;position: absolute;overflow: auto;height: 15vh;}
.tabflow table tbody tr:nth-child(2n+1){background-color: #f2f2f2;}
.tabflow table tbody tr td{font-size: 0.125rem;width: 1.2rem;}
.tabflow table tbody tr td:first-child{width: 0.4rem;}

转载于:https://www.cnblogs.com/dxt510/p/10538213.html

table固定表头滚动相关推荐

php表滑动其它固定,table固定表头使表单横向滚动
这次给大家带来table固定表头使表单横向滚动,table固定表头使表单横向滚动的注意事项有哪些,下面就是实战案例,一起来看一下. 1.头部用一个table并用一个p包裹着, 表格的具体内容用一个ta ...
table固定表头和首列
table固定表头和首列 html部分,结构上分为左右两部分,又分别拆开为上下两部分,总共四个结构部分,以下为固定首行和首列,需要固定多行多列的可以自行添加,如下列表中姓名为左上角固定不变的位置,可自 ...
html纵向表头,HTML table固定表头
最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬..... 1.thead和tbody的display设置为block; 这种可以实现,但是需要提前设置好每个th和td的 ...
element table固定表头，表的高度自适应解决方法
element table固定表头,表的高度自适应解决方法参考文章: (1)element table固定表头,表的高度自适应解决方法 (2)https://www.cnblogs.com/muou ...
layui表格table固定表头第一行固定显示
layui表格table固定表头第一行固定显示代码示例如下: layui.use('table', function(){$ = layui.jquery;var table = layui.tab ...
纯CSS实现Table固定表头和首列
Table固定表头和首列这种需求应该比较常见.以往的做法,需要写一大堆脚本,而现在,可以使用position:sticky轻松实现这个效果. .table-container {width: 100% ...
[HTML]TABLE固定表头和行头
TABLE固定表头和行头 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
动手练一练，手写一个价格对比、固定表头滚动的表格
大家好,今天我们将一起实践下如何手写固定表头,那么什么是固定表头呢?就类似 Excel 表格有个锁定表头的功能,方便用户查阅数据进行数据项的对比.虽然有不少相关插件提供了类似的功能,比如 Scroll ...
el table 固定表头和首行_vue表格实现固定表头首列
前言最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...

table固定表头滚动

table固定表头滚动相关推荐

最新文章

热门文章