表头列头固定页面

最新推荐文章于 2023-03-28 16:51:06 发布
最新推荐文章于 2023-03-28 16:51:06 发布
阅读量1k 收藏 1
点赞数
分类专栏： js Web 页面特效 文章标签： 表头列头固定 表头固定 scrollTop scrollLeft
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haiqiao_2010/article/details/42968607
版权


    该文章主要是写了一个table页面,并固定表头或者列头,以达到excel冻结列的效果,主要使用的js的scrollTop,scrollLeft.

一.js中scrollTop及scrollLeft的使用说明
scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度。例如:外层元素的高度值是200px,内层元素的高度值是300px。很明显，“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界”之外，scrollTop就等于这部分“不可见的内容”的高度。
scrollLeft同上.

二.页面示例
页面示例代码如下: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
    <html xmlns="http://www.w3.org/1999/xhtml">    
    <head>    
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    
    <title>表头列头固定 -- Sara</title>    
    <style>    
        body{font-size:12px;}    
        .t_n{width:30px; heihgt:240px!important; height:242px; background:buttonface; float:left; border-bottom:1px solid #000; border-left:1px solid #000}    
        .t_n span{display:block; text-align:center; line-height:20px; border:1px solid #000; width:28px; height:20px}    
        .t_number{border-right:1px solid #000; width:100%; margin-bottom:5px}    
        .t_number td{border-bottom:1px solid #000; width:30px; height:25px; text-align:center}    
        .dd{height:200px!important; height:208px; overflow-y:hidden;}    
       
        .t_i{width:400px; height:auto; float:left; border-right:1px solid #000; border-top:1px solid #000}    
        .t_i_h{width:100%; overflow-x:hidden; background:buttonface;}    
        .ee{width:618px!important; width:620px}    
        .t_i_h table{width:600px;}    
        .t_i_h table td{border-right:1px solid #000; border-bottom:1px solid #000; height:20px; text-align:center}    
        .cc{width:100%; height:220px; border-bottom:1px solid #000; border-right:1px solid #000; background:#fff; overflow:auto;}    
        .cc table{width:600px; }    
        .cc table td{height:25px; border-bottom:1px solid #000; border-right:1px solid #000; text-align:center}    
    </style>    
    <script>    
      function aa(){    
         var a=document.getElementById("cc").scrollTop;    
         var b=document.getElementById("cc").scrollLeft;    
          document.getElementById("dd").scrollTop=a;    
          document.getElementById("hh").scrollLeft=b;    
      }    
    </script>    
    </head>    
       
    <body>    
    <div class="t_n">    
        <span>序号</span>    
        <div class="dd" id="dd">    
            <table cellpadding="0" cellspacing="0" border="0" class="t_number">    
                <tbody>    
                    <tr>    
                    <td>1</td>    
                    </tr>    
                    <tr>    
                    <td>2</td>    
                    </tr>    
                    <tr>    
                    <td>3</td>    
                    </tr>    
                    <tr>    
                    <td>4</td>    
                    </tr>    
                    <tr>    
                    <td>5</td>    
                    </tr>    
                    <tr>    
                    <td>6</td>    
                    </tr>    
                    <tr>    
                    <td>7</td>    
                    </tr>    
                    <tr>    
                    <td>8</td>    
                    </tr>    
                    <tr>    
                    <td>9</td>    
                    </tr>    
                    <tr>    
                    <td>10</td>    
                    </tr>    
                </tbody>    
            </table>    
        </div>    
    </div>    
    <!--table-->    
    <div class="t_i">    
        <div class="t_i_h" id="hh">    
            <div class="ee">    
                <table cellpadding="0" cellspacing="0" border="0">    
                 <tr>    
                   <td width="10%">标题A</td>    
                   <td width="20%">标题B</td>    
                   <td width="10%">标题C</td>    
                   <td width="20%">标题D</td>    
                   <td width="20%">标题E</td>    
                   <td width="20%">标题F</td>    
                 </tr>    
                </table>    
            </div>    
        </div>    
        <div class="cc" id="cc" οnscrοll="aa()">    
            <table cellpadding="0" cellspacing="0" border="0">    
                <tr>    
                    <td width="10%">1</td>    
                    <td width="20%">1</td>    
                    <td width="10%">1</td>    
                    <td width="20%">1</td>    
                    <td width="20%">1</td>    
                    <td width="20%">1</td>    
                </tr>    
                <tr>    
                    <td>2</td>    
                    <td>2</td>    
                    <td>2</td>    
                    <td>2</td>    
                    <td>2</td>    
                    <td>2</td>    
                </tr>    
                <tr>    
                    <td>3</td>    
                    <td>3</td>    
                    <td>3</td>    
                    <td>3</td>    
                    <td>3</td>    
                    <td>3</td>    
                </tr>    
                <tr>    
                    <td>4</td>    
                    <td>4</td>    
                    <td>4</td>    
                    <td>4</td>    
                    <td>4</td>    
                    <td>4</td>    
                </tr>    
                <tr>    
                    <td>5</td>    
                    <td>5</td>    
                    <td>5</td>    
                    <td>5</td>    
                    <td>5</td>    
                    <td>5</td>    
                </tr>    
                <tr>    
                    <td>6</td>    
                    <td>6</td>    
                    <td>6</td>    
                    <td>6</td>    
                    <td>6</td>    
                    <td>6</td>    
                </tr>    
                <tr>    
                    <td>7</td>    
                    <td>7</td>    
                    <td>7</td>    
                    <td>7</td>    
                    <td>7</td>    
                    <td>7</td>    
                </tr>    
                <tr>    
                    <td>8</td>    
                    <td>8</td>    
                    <td>8</td>    
                    <td>8</td>    
                    <td>8</td>    
                    <td>8</td>    
                </tr>    
                <tr>    
                    <td>9</td>    
                    <td>9</td>    
                    <td>9</td>    
                    <td>9</td>    
                    <td>9</td>    
                    <td>9</td>    
                </tr>    
                <tr>    
                    <td>10</td>    
                    <td>10</td>    
                    <td>10</td>    
                    <td>10</td>    
                    <td>10</td>    
                    <td>10</td>    
                </tr>     
            </table>    
        </div>    
    </div>    
    </body>    
</html>

效果图如下:


Sara
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现的表头列头固定页面功能示例
10-20
主要介绍了JS实现的表头列头固定页面功能,涉及javascript针对页面元素及表格样式动态操作相关技巧,需要的朋友可以参考下
vue+element表格表头列 动态配置列控制显示隐藏
渐离的博客
06-30 4219
1.配置表头列的子组件 子组件全部代码 做了个本地存储 选择配置好的列 刷新 退出在登陆都会记录之前选择的状态 <template> <el-popover placement="bottom" width="150"> <el-checkbox-group v-model="info"> <el-col :span="24" > <el-checkbox
EasyExcel解析简易动态表头列及其简用
长臂人猿的博客
02-12 6504
前言 项目组祖传的POI代码，是基于entity实体类来固定格式解析，对应EXCEL是多少表头展示解析多少表头，需要改祖传代码，比较麻烦，时间不够。故用二次封装POI的EasyExcel来进行简易实现。 使用EasyExcel的优点 是基于POI进行的封装，其特点是： 占用内存少。3M的excel用POI sax依然需要100M，而easyExcel只是KB级别。 简洁。poi代码臃肿，easyExcel只需几行代码。 处理流程 读取Excel文件输入流：InputStream； 将数据输入流
网页固定头部功能
qq_51053759的博客
09-09 631
固定头功能实现步骤： 1、写出固定到头部的结构与样式 2、通过js或jq动态显示 分析： 事件源：window document 事件类型：onscroll(js)、scroll(jq) 事件处理函数： 获取滚动条距离顶部的距离 判断距离：>500显示固定头部 else隐藏固定头部 细节： 如果显示固定头部（把头部中的搜索框放入固定头部的盒子） 如果隐藏固定...
html5 表格固定表头，表尾，及前几列
03-28 617
小11</td><td>小12</td><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>语文</td><td>数学</td><td>英文</td><td>历史</td><td>地理</td><td>生物</td><td>化学</td><td>物理
css列名不动_html css将表头固定的最直接的方法
weixin_39750195的博客
12-20 186
position属性取值为fixed时，则元素的位置将不受滚动条的影响，而是直接依据窗口定位，这就是将表头固定的最直接方法，网上其他途径感觉都是在走弯路。但是与此同时必须解决两个问题。第一：表体将随之不依据表头定位，而是依据body元素定位，因此表体将上移，导致表体靠上部分被表头遮挡,而且有重影。第二：表体的宽高和表头的宽高也将互相独立不再受文档流的约束，这导致单元格对不齐。解决办法示例如下。其中...
html table 固定表头和列
09-21
html table 固定表头和列，下载后，运行index.html页面即可看到效果。
JS固定表头和左边列V2.0（源码）
07-31
修正表头列未锁定的Bug 1.8 修正表格含有thead时的样式丢失问题，以及行数设置问题，修正thead/tbody行归属问题 1.9 移除tb_top_left的底部边框线 修正表格cellpadding/cellspacing的设置问题 修复Firefox下的...
table固定表头固定列源码
06-03
table表格固定表头与固定列的源代码，用css样式来设置，只支持ie系统浏览器
HTML table表头固定（自己做项目使用的几种方法）
热门推荐
多毛大叔爱萝莉的博客
07-02 7万+
还记得之前公司需要做表头固定，但是由于基础太差，去查了好多好多文档。最后总结出几个不错的方法和插件。 一、使用css + js来实现表头固定 使用css定位th 根据父级滚动条scrolltop的偏移量获取值，在用js把偏移量赋值到th的定位top上。就做到了表头固定。（此方法需要固定高度） 项目demo css样式部分 主要是出现滚动条和定位th还有固定高度。 &amp;amp;amp;amp;amp;amp;l...
CSS 表头列头固定(实用)
11-22
实现列头和行头的固定,非常实用,能让你尽可能的改变最少的代码实现要求的功能.
html 表头固定及列固定
10-29
对网页中表格进行列及行的固定 有多重样式可充选择
移动端table固定表头与固定第一列
02-20
移动端项目，移动端table固定表头与固定第一列,HTML5和css3
jQuery自动固定表头插件freezeheader.js
01-28
插件描述：固定表头表格插件.有三种固定表头的表格效果可以使用。
纯CSS固定表头内容滚动表格
01-20
绝对可用的纯CSS固定表头样式，适用多种浏览器，实例的方式展示，我们公司开发的应用软件就用的是这种固定表头的样式
[html][jQuery]表头固定在顶部的一种实现思路
我是涛锅
06-29 5750
有时候当碰到要显示很多行又很多列的表格的时候，往往在翻到后面的时候已经对不上某一列是什么了。 所以需要将表头固定在顶部，而且是在滚动到表头被遮住的时候，才固定到顶部。先看效果图再讲一下我的实现思路 通过一个额外的table来显示固定顶端的表头，当滚动条滚动到某一位置（原数据表头被遮盖）的时候，显示这个固定的表头，反之则隐藏。 首先是显示数据的表格<table id="tMain"> <
html表头固定
12-01
js实现表头固定，
HTML+JS实现固定表头和锁定左列的Demo（兼容IE，火狐，谷歌等大众浏览器）
03-28
通过table的用来锁定表头，内置封装的JS控制锁定列，在页面中直接调用JS方法设定。
el-table 固定列表头出现横线
最新发布
04-28
当需要固定表头时，我们可以在el-table中使用fixed属性，将表头和指定的列固定在页面中。 在el-table中固定表头时，有时候会出现表头和数据之间的横线，这通常是由于表格的CSS样式问题导致的。解决这个问题的方法有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值