最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
当前位置: 首页 - 科技 - 知识百科 - 正文

html实现固定表格四周并且可以上下左右滚动

来源:懂视网 责编:小OO 时间:2020-11-27 15:33:01
文档

html实现固定表格四周并且可以上下左右滚动

问题。最近做项目统计的时候碰见一个特定的需求,要求表格上下滚动时,表格头尾固定;左右滚动的时候表格,表格第一列最后一列固定。先上效果图可能会更明了些。左右滚动时,两列固定,头尾中间部分跟着滚动。上下滚动时,头尾固定,第一列和最后一列中间部分跟着滚动。思路。思考了很久发现,如果单纯的用表格基本很难实现,上下滚动的时候存在相互矛盾的地方。最后换了个思路去用p布局,仿表格设计,来实现这样的效果。解决。1、整体布局:分为上中下三部分,即header,body,footer三个部分。body固高。实现上下滚动。是不是很简单,哈哈。
推荐度:
导读问题。最近做项目统计的时候碰见一个特定的需求,要求表格上下滚动时,表格头尾固定;左右滚动的时候表格,表格第一列最后一列固定。先上效果图可能会更明了些。左右滚动时,两列固定,头尾中间部分跟着滚动。上下滚动时,头尾固定,第一列和最后一列中间部分跟着滚动。思路。思考了很久发现,如果单纯的用表格基本很难实现,上下滚动的时候存在相互矛盾的地方。最后换了个思路去用p布局,仿表格设计,来实现这样的效果。解决。1、整体布局:分为上中下三部分,即header,body,footer三个部分。body固高。实现上下滚动。是不是很简单,哈哈。
这篇文章主要为大家详细介绍了固定表格四周实现表格上下左右滚动的解决方法,表格上下滚动时,表格头尾固定;左右滚动的时候表格,表格第一列最后一列固定,本文为大家提供了思路,感兴趣的小伙伴们可以参考一下

问题:

最近做项目统计的时候碰见一个特定的需求,要求表格上下滚动时,表格头尾固定;左右滚动的时候表格,表格第一列最后一列固定。

先上效果图可能会更明了些:

左右滚动时,两列固定,头尾中间部分跟着滚动。

上下滚动时,头尾固定,第一列和最后一列中间部分跟着滚动。

思路:

思考了很久发现,如果单纯的用表格基本很难实现,上下滚动的时候存在相互矛盾的地方。最后换了个思路去用p布局,仿表格设计,来实现这样的效果。

解决:

1、整体布局:分为上中下三部分,即header,body,footer三个部分。body固高。实现上下滚动。是不是很简单,哈哈。

2、header布局:分为left container right,left10%宽度左浮动,container80%宽度左浮动,right10%宽度左浮动。container里面加一个数据实际宽度的容器column-container(相对定位)。

3、body,footer同header。

4、控件核心:生成一个宽度同container同宽的(80%)p,里面放置一个同column-container实际数据宽度相同的p(如id=Scroll)。来模拟左右滚动条。

JavaScript Code复制内容到剪贴板

  1. $("#Scroll").scroll(function () {

  2. var scrollLeft = $(this).scrollLeft();

  3. $(".column-container").css({ "left": -scrollLeft + "px" });

  4. });

即,模拟的滚动条去控制header body footer 中的column-container滚动。这样就实现了左右滚动时固定了两列,同时头尾行的container也跟着滚动。

结语:

由于代码样式等贴出来太冗长了,在这里就只说说思路了,动手试试吧。

【相关推荐】

1. HTML免费视频教程

2. 详解前端开发常用的HTML标签

3. 通过marquee标签完成滚动效果的纯html代码

4. 用HTML编写个人简历的代码实例

5. 分享三种创建新元素的方法

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文档

html实现固定表格四周并且可以上下左右滚动

问题。最近做项目统计的时候碰见一个特定的需求,要求表格上下滚动时,表格头尾固定;左右滚动的时候表格,表格第一列最后一列固定。先上效果图可能会更明了些。左右滚动时,两列固定,头尾中间部分跟着滚动。上下滚动时,头尾固定,第一列和最后一列中间部分跟着滚动。思路。思考了很久发现,如果单纯的用表格基本很难实现,上下滚动的时候存在相互矛盾的地方。最后换了个思路去用p布局,仿表格设计,来实现这样的效果。解决。1、整体布局:分为上中下三部分,即header,body,footer三个部分。body固高。实现上下滚动。是不是很简单,哈哈。
推荐度:
标签: 表格 滚动 固定
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top