表头列头固定页面

该文章主要是写了一个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" onscroll="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> 

效果图如下:

时间: 2024-09-30 00:25:30

表头列头固定页面的相关文章

extjs3.x 动态隐藏列头的做法

qGridPanel.addListener('rowclick',function(){ var record = qGridPanel.getSelectionModel().getSelected(); ffGridStore.removeAll(); ffGridStore.baseParams = { 'classid' : escape(record.data.classid), 'studentcode' : escape(record.data.studentcode), 'co

下载不含数据EXCEL的固定表头模版(标准EXCEL只含有列头),然后上传EXCEL.显示成功和上传失败的EXCEL连接

<div id="import" runat="server" visible="false"> Step1:<asp:HyperLink ID="HyperLink1" NavigateUrl="~/CommonTemplate/设备清单模版.xlsx" runat="server">下载模版</asp:HyperLink><br />

PHP:数字转Excel列头

转自我的个人博客:阔野飞花 http://www.rexcao.net/archives/169 前段时间升级一个项目的Excel导出功能,这次的列数大概有60多条,在处理过程中发现一个问题,原先做好的数字转Excel列头功能现在只到 AZ列就结束了,那显然是不够用啊,后来再仔细查看,发现,原来AZ列之后的内容显示到AAA列上面了,然后看了看原来的代码才发现,原来的逻辑错了! 我原来的错误逻辑是这样的:A-Z,Z下来是AA,AA-AZ,AZ下来是AAA,下来是AAAA依次类推...但是Excel

datagrid拖动列头更换排列顺序

在做这个功能的时候在网上找了大量资料,发现都不适用,要不然就是代码太冗余,所以另起炉灶,自己封装了这个函数 下面是完整的代码: 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href=&qu

jqgrid 将列头设置为超链接或按钮

有时,需要将某个列头设置为超链接或按钮,点击超链接或按钮能够跳转至其他页面(或执行一个事件操作). 可以把 label 值设置成一个a标签或button 代码如下: colModel: [{ label: '<a href="HtmlPage1.html" title="测试标题">OrderID</a>', name: 'OrderID', key: true, width: 75 }]

GridControl实现多选和列头全选

大名鼎鼎的DEV啊……弄了一个gridControl结果不知道如何加选择列,还有表头全选上网搜了搜终于搜到解决方案……结果解决办法麻烦的要死…… 这么一个挺基础的需求,DEV不提供解决方案?这没道理吧?怎么办啊……就差这一个功能了……换控件不划算啊 有这么一个方法来完成(只适合winform): 1.     绑定数据的源表添加一列      DataTable dt = ds.Tables[0]; dt.Columns.Add("selected", System.Type.GetT

HTML5定制全选列头

随着HTML5产品分支的不断深入使用,HTML5的需求也是越来越多,表格组件的使用也不例外,什么排序,分页,自动列宽等.最近有客户提出了如果让表格的列头加上全选的功能.细细分析其实就是两部分,表格的body部分是勾选的列,表头也绘制成勾选的列. 对于表格body部分的勾选,最简单是应用TWaver默认的boolean类型的render,方法很简单,只要在创建表格列时设置下面的语句就行: 1 column.setValueType('boolean'); 主要就是绘制表头的render,表头的re

响应式重构,如何把一个固定页面重构为一个响应式页面:

上周末时接到公司安排下来的任务, 要我一个人在一周内把一个项目里的所有固定页面转换为响应式的页面,14个页面,虽说做成响应式不难,但是,先理解别人的代码,然后通过修改别人的代码,把一个页面转换为一个响应式的页面,还是没有那么简单的,公司觉得这个任务简单,于是把这个任务交给了我这个新手. 在重构一个页面时,我的思路如下: 一.拿到一个页面,你首先要考虑这个页面我是该重新做呢还是在现有的基础上去修改呢? 我这是这么判断的,首先看他的html结构,是否符合响应式的要求,如果符合,就在现有的基础去修改,

html - table 表格不被撑开,td某些列宽度固定某些列自适应

table-layout 属性的解释:http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp 1,实现table细边框,设置如下css: table,table td,table th{border:1px solid #ff0000;border-collapse:collapse;} 2,table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:b