步奏:
1、設置兩個table,第一個table有thead沒有tbody,第二個table有tbody沒有table;
2、第二個table需要一個div包住,并設置寬高,可用絕對布局
3、tr下的th和td需要設置相同的寬度
實例:
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表格的表頭不滾動的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答