表格表头固定的一种实现方式
2018-01-13 11:08
369 查看
代码:
效果图:
<html> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $(document).ready(function() { var tableHtml = $("#tableDiv").html(); var tableDivCopy = $("<div id='tableDivCopy' style='display:none;'></div>"); $(tableHtml).attr("id", "table1Copy"); $(tableHtml).appendTo(tableDivCopy); tableDivCopy.appendTo("body"); $("#tableDiv").scroll(function() { var headHeight = $("#table1 thead").height(); if ($("#tableDiv").scrollTop() > headHeight) { $("#tableDivCopy").css({ position : "absolute", top : $("#tableDiv").position().top, left : $("#tableDiv").position().left, height : $("#table1 thead").height(), width : $("#tableDiv").width() - 18, zIndex : 2, overflow : "hidden", background : "#FFFFFF", display : "none" }); $("#table1Copy").css("marginLeft", 0 - $("#tableDiv").scrollLeft()); $("#tableDivCopy").show(); } else { $("#tableDivCopy").hide(); } }); }); </script> </head> <body> <div style="height:200px;"> 其他组件。。。 </div> <div id="tableDiv" style="overflow-y:scroll;max-height:350px;"> <table id="table1" class="table table-bordered table-hover table-striped"> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3</th> <th>列4</th> <th>列5</th> </tr> </thead> <tbody> <tr> <td>值1</td> <td>值2</td> <td>值3</td> <td>值4</td> <td>值5</td> </tr> <tr> <td>值1</td> <td>值2</td> <td>值3</td> <td>值4</td> <td>值5</td> </tr> <tr> <td>值1</td> <td>值2</td> <td>值3</td> <td>值4</td> <td>值5</td> </tr> <tr> <td>值1</td> <td>值2</td> <td>值3</td> <td>值4</td> <td>值5</td> </tr> <tr> <td>值1</td> <td>值2</td> <td>值3</td> <td>值4</td> <td>值5</td> </tr> <tr> <td>值1</td> <td>值2</td> <td>值3</td> <td>值4</td> <td>值5</td> </tr> <tr> <td>值1</td> <td>值2</td> <td>值3</td> <td>值4</td> <td>值5</td> </tr> <tr> <td>值1</td> <td>值2</td> <td>值3</td> <td>值4</td> <td>值5</td> </tr> <tr> <td>值1</td> <td>值2</td> <td>值3</td> <td>值4</td> <td>值5</td> </tr> <tr> <td>值1</td> <td>值2</td> <td>值3</td> <td>值4</td> <td>值5</td> </tr> <tr> <td>值1</td> <td>值2</td> <td>值3</td> <td>值4</td> <td>值5</td> </tr> <tr> <td>值1</td> <td>值2</td> <td>值3</td> <td>值4</td> <td>值5</td> </tr> <tr> <td>值1</td> <td>值2</td> <td>值3</td> <td>值4</td> <td>值5</td> </tr> <tr> <td>值1</td> <td>值2</td> <td>值3</td> <td>值4</td> <td>值5</td> </tr> </tbody> </table> </div> <div style="height:200px;"> 其他组件。。。 </div> </body> </html>
效果图:
相关文章推荐
- JS实现table表格固定表头且表头随横向滚动而滚动
- 表头固定内容可滚动表格的3种实现方法
- GridView 表头固定的一种实现方法
- 顶部表头和侧面表头固定的表格div实现
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- 表头固定内容可滚动表格的3种实现方法
- 表格标题随页面滚动固定在顶端的实现方式
- Vue 实现表格搜索、固定表头与排序
- css固定table表头的实现代码可同时看到表头和表格底部
- easyui datagrid 动态表头 动态columns 的一种实现方式
- div+css实现表头固定内容滚动表格
- table表头和首列的表格固定-JQuery、js实现的Table表头固定
- mfc listctrl实现表头与数据的不同对齐方式(换了一种思维方式)
- JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动
- 表格添加固定表头,js 实现 tableFixedHead.js
- 表头固定,内容可滚动表格的3种实现方法
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- 推荐:用CSS实现的固定表头的HTML表格
- 简单实现固定表格的上表头、左表头
- html页面中,表格数据可以固定表头,表数据部分做滚动条显示,如何实现