解決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文件的js代碼
這篇文章介紹了異步動態(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中CheckBox全選終極方案
在javascript頁面中實現(xiàn)CheckBox或者Radio的選中狀態(tài)是一件很容易的事情，下面我們來給大家展示下在asp.net中使用javascript中CheckBox全選終極方案，有需要的小伙伴可以參考下。
2015-05-05
JavaScript中變量提升和函數(shù)提升的詳解
這篇文章主要介紹了JavaScript中變量提升和函數(shù)提升的詳解，文章通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
js實現(xiàn)按鈕顏色漸變動畫效果
這篇文章主要介紹了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個需要注意的運(yùn)算符
這篇文章主要介紹了Javascript中3個需要注意的運(yùn)算符,這3個運(yùn)算符的使用有很多需要注意的地方和有意思的地方,需要的朋友可以參考下
2015-04-04