解決layui表格的表頭不滾動的問題
更新時間：2019年09月04日 15:03:57 作者：知了還沒睡
今天小編就為大家分享一篇解決layui表格的表頭不滾動的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
步奏：
1、設(shè)置兩個table，第一個table有thead沒有tbody，第二個table有tbody沒有table；
2、第二個table需要一個div包住，并設(shè)置寬高，可用絕對布局
3、tr下的th和td需要設(shè)置相同的寬度
實例：
html：
<html> <head></head> <body> <div id="righttable" style="width:100%;height:70%;padding-bottom: 2px;position:relative;"> <table class="layui-table" border="1" style="width: 100%;border:1px solid #ddd;"> <thead id="thead_"> <tr> <th>站點名稱</th> <th>站點排名</th> <th>站點電量(kWh)</th> </tr> </thead> </table> <div style="position:absolute;bottom:2px;top:31px;overflow-y:scroll;width:100%"> <table class="layui-table" border="1" style="width: 100%;border:1px solid #ddd;"> <tbody id="tbody_"> </tbody> </table> </div> </div> </body> </html>
css：
.layui-table tr th,td{white-space:nowrap;padding:5px;text-align:center;width:33.4%;}
以上這篇解決layui表格的表頭不滾動的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章介紹了異步動態(tài)加載js與css文件的幾種方法，有需要的朋友可以參考一下2013-09-09
JavaScript面向?qū)ο罄^承原理與實現(xiàn)方法分析
這篇文章主要介紹了JavaScript面向?qū)ο罄^承原理與實現(xiàn)方法,結(jié)合實例形式分析就面向?qū)ο蟪绦蛟O(shè)計中原形、對象、繼承的相關(guān)概念、原理、實現(xiàn)方法及操作注意事項,需要的朋友可以參考下2018-08-08
vscode工具函數(shù)idGenerator使用深度解析
這篇文章主要為大家介紹了vscode工具函數(shù)idGenerator使用深度解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
關(guān)閉瀏覽器輸入框自動補(bǔ)齊 兼容IE,FF,Chrome等主流瀏覽器
這篇文章主要介紹了關(guān)閉瀏覽器輸入框自動補(bǔ)齊 兼容IE,FF,Chrome等主流瀏覽器，需要的朋友可以參考下。希望對大家有所幫助2014-02-02
JavaScript訪問本地文件夾的幾種實現(xiàn)方法
由于安全限制無法直接訪問用戶的本地文件或文件夾,本文主要介紹了JavaScript訪問本地文件夾的幾種實現(xiàn)方法,具有一定的參考價值,感興趣的可以了解一下2024-06-06
在javascript頁面中實現(xiàn)CheckBox或者Radio的選中狀態(tài)是一件很容易的事情，下面我們來給大家展示下在asp.net中使用javascript中CheckBox全選終極方案，有需要的小伙伴可以參考下。2015-05-05
這篇文章主要介紹了JavaScript中變量提升和函數(shù)提升的詳解，文章通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了js實現(xiàn)按鈕顏色漸變動畫效果的方法,涉及javascript鼠標(biāo)事件及頁面表單元素樣式的動態(tài)操作技巧,需要的朋友可以參考下2015-08-08
微信小程序錄音實現(xiàn)功能并上傳(使用node解析接收)
在我們的日常開發(fā)中經(jīng)常會遇到錄音功能，并上傳到服務(wù)器，今天小編給大家分享微信小程序錄音功能實現(xiàn)并上傳錄音文件，使用node解析接收,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了Javascript中3個需要注意的運算符,這3個運算符的使用有很多需要注意的地方和有意思的地方,需要的朋友可以參考下2015-04-04