?一、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固定表头滚动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。