html固定table表头的实现思路
来源:互联网 发布:知乎阿波罗和雅典娜 编辑:程序博客网 时间:2024/05/21 10:55
1.将table放在可滚动容器中;
2.可滚动容器外层还需要一个容器,这个容器需设置超出范围隐藏和定位(相对、绝对都行);
3.利用脚本克隆一个目标table,调整克隆table的列宽与原table相同,隐藏tbody,追加到外层的容器中;
4.监听滚动容器的滚动事件,动态调整克隆table的左偏移,上偏移不需要调整,因为已经固定了。
效果演示
<html>
<head>
<style>
.tablebox{height:300px;overflow:auto;width:100%;}
.tableboxcontainer table td{white-space:nowrap;}
.tableboxcontainer table thead{background:#ddd;}
.tableboxcontainer{position:relative;width:300px;overflow:hidden;}
</style>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="tableboxcontainer">
<div class="tablebox" id="tablebox">
<table class="table">
<thead>
<tr>
<td>列1</td><td>列2</td><td>列3</td><td>列4</td><td>列5</td>
<td>列6</td><td>列7</td><td>列8</td><td>列9</td><td>列10</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
//生成表格测试数据
var $table=$("#tablebox").find("table");
var $tbody=$table.find("tbody");
for(var i=0;i<20;i++){
var $tr=$("<tr>");
for(var j=0;j<10;j++){
$tr.append(function(){
return $("<td>").text("行:"+(i+1)+"列:"+(j+1));
});
}
$tr.appendTo($tbody);
}
//克隆原表,追加到最外层容器中
var $table_fixed=$table.clone();
var colwidths=[];
//设置克隆表的列宽
$tbody.find("tr:eq(0)").find("td").each(function(){
var width=$(this).width()+parseFloat($(this).css("padding-left"))+parseFloat($(this).css("padding-right"));
colwidths.push(width);
});
$table_fixed.find("thead td").each(function(i){
$(this).width(colwidths[i]);
});
$table_fixed.css({"position":"absolute","left":0,"top":0,"table-layout":"fixed"});
$table_fixed.find("tbody").hide();//隐藏克隆表的tbody
$("#tablebox").parent().append($table_fixed);
//监听原表容器的滚动事件
$("#tablebox").bind("scroll",function(){
var left=$(this).scrollLeft();
$table_fixed.css({"left":-left});
});
});
</script>
</body>
</html>
WEB前端学习交流群21 598399936
- html固定table表头的实现思路
- html Table实现表头固定
- html Table实现表头固定
- [html][jQuery]表头固定在顶部的一种实现思路
- html table css 实现固定表头的办法
- html 中固定表头的 table
- Table实现表头固定
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- html中table固定表头
- 固定table的表头
- HTML/CSS实现<table>表头固定、表体滚动
- table表头和首列的表格固定-JQuery、js实现的Table表头固定
- table表头和首列的表格固定-CSS实现的Table表头固定
- table表头和首列的表格固定-CSS实现的Table表头固定
- 两个table实现固定表头
- js 实现 table 固定表头
- 简单实现Table固定表头
- Cadence.OrCAD.Allegro.v17.20.030.Hotfix.Only 1DVD
- 欢迎使用CSDN-markdown编辑器
- Spring Aop机制总结
- james邮件服务器搭建
- Android面试小结
- html固定table表头的实现思路
- ajax跨域请求
- 机器学习—近似误差与估计误差理解
- Day21—反射机制、常用的设计模式和原则
- 表单提交时候"Failed to convert property value of type [java.lang.String] to
- JavaScript 异步方案 async/await
- Levko and Permutation CodeForces
- XSS常用payload整理(持续更新)
- MyBatis