固定表头thead ,之前在网上看到的各种方法,感觉都不是我想要的结果,自己尝试写了一下,当然,网上也有插件可以用,自己百度一下,引入了插件后,一行代码就搞定;
1.效果展示
![](https://img-blog.csdn.net/20170906165259384?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUkRfbW9vbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](https://img-blog.csdn.net/20170906165342066?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUkRfbW9vbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
.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>
!!!