固定表头thead ,之前在网上看到的各种方法,感觉都不是我想要的结果,自己尝试写了一下,当然,网上也有插件可以用,自己百度一下,引入了插件后,一行代码就搞定;
1.效果展示
.simple-table th { color: #3A3F46; background: #eef2fa; border-right: 1px solid #e7ecf1; }
模拟的表头多一个th作为数据量大时的最右侧的tbody的滚动宽度
<div class="table-outer"> <!-- 模拟固定表头 多一个th作为数据量大时的最右侧的tbody的滚动宽度--> <div style="height:36px;overflow-y: auto;overflow-x: hidden;" > <table class="simple-table" > <colgroup> <col width="50px" /> <col width="170px" /> <col width="110px" /> <col width="130px" /> <col width="130px" /> <col width="90px" /> <col width="130px" /> <col width="90px" /> <col width="130px" /> <col width="15px" /> </colgroup> <thead > <tr > <th > 序号 </th> <th >测试</th> <th >测试测试1</th> <th >测试正常率</th> <th >测试响应率</th> <th >测试次数</th> <th >测试成功次数</th> <th >测试次数</th> <th >测试成功次数</th> <th ></th> </tr> </thead> </table> </div> <!-- 实际表结构 --> <div style="height:250px;overflow-y: auto;overflow-x: hidden;" > <table class="simple-table" id="xtbb-list"> <colgroup> <col width="50px" /> <col width="170px" /> <col width="110px" /> <col width="130px" /> <col width="130px" /> <col width="90px" /> <col width="130px" /> <col width="90px" /> <col width="130px" /> </colgroup> <!-- 隐藏实际表thead --> <thead style="display:none;" > <tr > <th > 序号 </th> <th >测试</th> <th >测试测试1</th> <th >测试正常率</th> <th >测试响应率</th> <th >测试次数</th> <th >测试成功次数</th> <th >测试次数</th> <th >测试成功次数</th> </tr> </thead> <tbody > <!-- tbody部分我用的是前台模板引擎加载的 --> <%for(var j = 0; j < 10; j++) {%> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <%}%> </tbody> </table> </div>!!!