解決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)文章
Laydate時間組件在火狐瀏覽器下有多時間輸入框時只能給第一個輸入框賦值的解決方法
這篇文章主要介紹了Laydate時間組件在火狐瀏覽器下有多時間輸入框時只能給第一個輸入框賦值的解決方法,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了chrome監(jiān)聽cookie變化與賦值問題,cookie監(jiān)聽與賦值操作需要manifest文件里聲明權(quán)限問題，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
JavaScript改變HTML元素的樣式改變CSS及元素屬性
改變CSS及元素屬性的方法有很多，在本文將為大家介紹下使用js是如何做到的，感興趣的朋友可以感受下2013-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas仿代碼流瀑布，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了URL中“#” “？” &“”號的作用淺析,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了momentjs詳細(xì)使用說明,使用 Moment.js 可以輕松地獲取上周、上月和前三個月的起始和結(jié)束時間，在示例中，我們傳入了 '2023-07-15'，并將返回的日期信息存儲在 dateInfo 變量中，然后將其打印到控制臺上，需要的朋友可以參考下2023-07-07
本文給大家分享一段js代碼實現(xiàn)自動切換圖片的代碼，代碼非常簡單，應(yīng)用領(lǐng)域非常廣泛，感興趣的朋友一起看看吧2016-10-10
這篇文章主要介紹了js自定義鼠標(biāo)右鍵的實現(xiàn)原理及源碼,需要的朋友可以參考下2014-06-06
頁面中實現(xiàn)setInterval和setTimeout效果示例詳解
這篇文章主要為大家介紹了不使用setTimeout和setInterval在頁面中實現(xiàn)setInterval和setTimeout效果示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章將給大家詳細(xì)介紹一下JavaScript實現(xiàn)模塊的拖拽功能的代碼示例，文中有詳細(xì)的實現(xiàn)步驟,需要的朋友可以參考下2023-07-07