首页 / HTML / 响应式表格之固定表头的实现

响应式表格之固定表头的实现

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了响应式表格之固定表头的实现，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2596字，纯文字阅读大概需要4分钟。

内容图文

数据展示时，表头的固定，可以有更好的可读性。

一、实现方式：
1、定义2个表格，一个absolute固定


   ......

      
序号
股票名称

2、表1复制，并插入表2

var th_new=$("#table1 tr").eq(0).clone();
$("#fixed-table1").append(th_new);

3、resize()方法，实时获取表1各列宽度

function trResize(){
	$("#fixed-table1 th").each(function(){
	var num=$(this).index();
	var th_width=$("#table1 th").eq(num).width();
	$(this).css("width",th_width+"px");
	});
}

4、页面过小时，表格滚动带表头滚动

$(".table1-wapper").scroll(function(){
	var scroll=-$(this).scrollLeft()
	$(".fixed-table1-wapper").css("left",scroll+"px");
});

二、注意细节：

1、宽度自适应、去除单元格间隙：

2、表格线：
直接添加border，会出现边线重合；添加属性：border-collapse: collapse;
响应式表格之固定表头的实现 - 文章图片

3、td宽度：
控制第一行宽度即可 /

4、奇偶行颜色不同：
css: #table1 tr:nth-child(2n){background-color:#ccc;} ie7兼容性问题
jquery: $("#table1 tr:even").css("background-color","#ccc");

以下为完整代码：





表格整理

　　

内容总结

以上是互联网集市为您收集整理的响应式表格之固定表头的实现全部内容，希望文章能够帮你解决响应式表格之固定表头的实现所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/394768.html

来源：【匿名】