简单的自定义固定表头thead tbody滚动第二版

最新推荐文章于 2024-03-26 13:57:13 发布

_fighting

最新推荐文章于 2024-03-26 13:57:13 发布

阅读量3.4k

点赞数

分类专栏： html，css 文章标签： js table表头固定 css

本文链接：https://blog.csdn.net/RD_moon/article/details/77864432

版权

html，css 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

 
 固定表头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>
！！！ 
  