步奏:
1、設置兩個table,第一個table有thead沒有tbody,第二個table有tbody沒有table;
2、第二個table需要一個div包住,並設置寬高,可用絕對布局
3、tr下的th和td需要設置相同的寬度
Ps:你品,你細品!!!
實例:
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>
.layui-table tr th,td{white-space:nowrap;padding:5px;text-align:center;width:33.4%;}