如何固定表格四周实现表格上下左右滚动
问题:
最近做项目统计的时候碰见一个特定的需求,要求表格上下滚动时,表格头尾固定;左右滚动的时候表格,表格第一列最后一列固定。
先上效果图可能会更明了些:
左右滚动时,两列固定,头尾中间部分跟着滚动。
上下滚动时,头尾固定,第一列和最后一列中间部分跟着滚动。
思路:
思考了很久发现,如果单纯的用表格基本很难实现,上下滚动的时候存在相互矛盾的地方。最后换了个思路去用div布局,仿表格设计,来实现这样的效果。
解决:
1、整体布局:分为上中下三部分,即header,body,footer三个部分。body固高。实现上下滚动。是不是很简单,哈哈。
2、header布局:分为left container right,left10%宽度左浮动,container80%宽度左浮动,right10%宽度左浮动。container里面加一个数据实际宽度的容器column-container(相对定位)。
3、body,footer同header。
4、控件核心:生成一个宽度同container同宽的(80%)div,里面放置一个同column-container实际数据宽度相同的div(如id=Scroll)。来模拟左右滚动条。
- $("#Scroll").scroll(function () {
- var scrollLeft = $(this).scrollLeft();
- $(".column-container").css({ "left": -scrollLeft + "px" });
- });
即,模拟的滚动条去控制header body footer 中的column-container滚动。这样就实现了左右滚动时固定了两列,同时头尾行的container也跟着滚动。
结语:
由于代码样式等贴出来太冗长了,在这里就只说说思路了,动手试试吧。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
原文地址:http://www.cnblogs.com/checccy/p/5601145.html
相关文章
CSS教程,CSS固定表头的HTML表格-CSS教程-网页制作-网页教学网
用CSS实现的固定表头的HTML表格。 曾经在项目中实现过一个固定表头的HTML表格,但使用了非常臃肿的代码,因为实际上是画了三个一样的表格。一个纯粹用HTML和CSS实2008-10-17- 一次性将数据全部显示出来,页面就会出现滚动条,这样的话就不能同时看到表头信息和表格底部的数据记录,把表头固定可以解决此问题2012-12-13
- 表格的头部固定可以利用css的样式来实现,也可以利用jquery把原来table的头隐藏,具体实现如下,感兴趣的朋友可以参考下,希望对大家有所帮助2013-08-18
- 对于有很多条目的数据,我们通常采用table元素来快速实现,如果某一td的内容太多的话就会出现一片混乱,本文提供了不错的解决方案,有需求的朋友可以参考下2014-05-31
- thead、tfoot 以及 tbody标签实现一个表格示例,这三个标签分别代表表格的头部(th)、主题、和底部,能让表格更加语义化的同时,也能让我们更加方便的控制表格的表现2014-06-10
- 想必大家都有遇到过这样的效果,就是当鼠标经过时颜色不同,且奇偶行颜色也不同,此鼠标响应效果在css中也可以实现,下面有个不错的示例代码,需要的朋友可以参考下2014-07-16
- 做一个添加设备的表单,结果因为前缀大小不一样,所以很难看,可以用表格来格式化一下,下面是具体的美化前与后的代码及截图,大家可以对比一下2014-07-22
- 很多时候利用复杂style代码,来生成这样的表格,造成了页面的修改性和可读性都非常差。这里推荐使用css来产生一个细线表格,感兴趣的朋友可以了解下2014-08-08
- 这篇文章主要介绍了html 表格比较宽溢出的解决方法,表格如果比较宽,则有可能溢出,所以下面的方法,大家可以看看2019-09-06
- 连续的数字和英文字符常常将容器撑大,挺让人头疼。下面与大家分享下CSS如何实现换行的方法,从事web前端的朋友可以看看哦2014-10-17
最新评论