`

固定表格第一行(表头固定)，其他行可以上下滚动

CC++C#BBSAjax
阅读更多

 

本文来源：http://bbs.okajax.com/thread-2482-1-1.html

固定表格第一行，其他行可以上下滚动

固定表格第一行，其他行可以上下滚动表格。在开发中非常有用。比如说制作一张报表时，由于数据太多，滚动到下面的数据，就看不到上面的标题了。现在有了解决的好办法了。
电脑医生奉献！
共享就是快乐！
演示地址：http://bbs.okajax.com/demo/20/
下面是代码，最后有压缩包。
复制内容到剪贴板
代码:
<html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
   <title>电脑医生</title>
   <style>
   .fixedHeaderTr    
   {    
   position:relative;    
   top:expression(this.offsetParent.scrollTop);    
   };    

   .mainDiv    
   {    
   overflow:auto;    
   scrollbar-face-color:9999ff;
   height:expression((document.body.clientHeight-this.offsetTop-20>this.children[0].offsetHeight)?(this.children[0].offsetHeight+20) : (document.body.clientHeight-this.offsetTop-20));    
   width:expression(document.body.clientWidth-20);    
   }
   </style>
   </head>

<body>


   <br>
   <div class="mainDiv">
         <table width="100%" border=1 cellspacing=0 style="margin-top:-2px" >
         <TR class="fixedHeaderTr" style="">
         <TD nowrap rowspan=2 style="position:relative;background:navy;color:white;">
部门名称</TD>
         <TD nowrap colspan=3 style="background:navy;color:white;" >
第一季度费用</TD>

         <TD nowrap colspan=4 style="background:navy;color:white;" >
第二季度费用</TD>

         </TR>
         <TR class="fixedHeaderTr">
         <TD nowrap style="background:navy;color:white;">1月</TD>
         <TD nowrap style="background:navy;color:white;">2月</TD>
         <TD nowrap style="background:navy;color:white;" colspan="2">3月</TD>
         <TD nowrap style="background:navy;color:white;">4月</TD>
         <TD nowrap style="background:navy;color:white;">5月</TD>
         <TD nowrap style="background:navy;color:white;">6月</TD>
         </TR>
         <TR>
         <TD>管理部</TD>
         <TD>1000</TD>
         <TD>3620</TD>
         <TD colspan="2">1256</TD>
         <TD>5226</TD>
         <TD nowrap >
            251</TD>
         <TD nowrap >
            2351</TD>
         </TR>
         <TR>
         <TD>财务部</TD>
         <TD>1112</TD>
         <TD>2566</TD>
         <TD colspan="2">12456</TD>
         <TD>2563</TD>
         <TD>2256</TD>
         <TD>256</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>  
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>  
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
               <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
         <TR>
         <TD>A</TD>
         <TD>　</TD>
         <TD>　</TD>
         <TD colspan="2">　</TD>
         <TD>B</TD>
         <TD>　</TD>
         <TD>C</TD>
         </TR>
         </table>
   </div>
</body>

</html>

 

分享到：
| xmlns的作用
评论
2 楼 yh1350 2010-09-25  
有没有兼容 Firefox的呀
1 楼 sue0927 2008-09-10  
FF下效果显示不了。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Android可固定表头和第一列自定义表格

    Android可固定表头和第一列自定义表格，集成简单。 API使用说明： LockTableView mLockTableView=new LockTableView(this,mContentView,mTableDatas); mLockTableView.setLockFristColumn(true) //是否锁定第一列 ...

    QTableView QTableWidget 复杂表头(多行表头) 、冻结、固定特定的行

    QT QTableView QTableWidget 复杂表头(多行表头) 、（冻结、固定特定的行），具体效果看博客： https://blog.csdn.net/xiezhongyuan07/article/details/82857631

    JS固定表头和左边列V2.0（源码）

    1.表格的宽度以及表格每一列的宽度需要固定（特殊情况除外：当表格列数少并且表格总宽度明显小于表格父容器的宽度时，也就是表格列不存在自动换行的问题） 2.表格父容器尺寸大小改变时，需要调用 setBoxSize 方法，...

    JS固定表头和左边列（最新源码）1.9

    1.表格的宽度以及表格每一列的宽度需要固定（特殊情况除外：当表格列数少并且表格总宽度明显小于表格父容器的宽度时，也就是表格列不存在自动换行的问题） 2.表格父容器尺寸大小改变时，需要调用 setBoxSize 方法，...

    javascript 绘制表格table,可以固定首行,首列

    javascript 绘制表格table,可以固定首行,首列,其他内容滚动显示.兼容ie,firefox,chrome等浏览器.

    html的table滚动时固定首行和首列

    html的table滚动时固定首行和首例，网上多为3个table拼合实现，现使用一个table实现

    CSS 表头列头固定(实用)

    实现列头和行头的固定,非常实用,能让你尽可能的改变最少的代码实现要求的功能.

    利用纯css实现table固定列与表头中间横向滚动的思路和实例

    主要给大家介绍了关于如何利用纯css实现table固定列与表头，中间横向滚动的相关资料，文中通过示例代码详细的给大家介绍了关于实现该效果的思路与方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们...

    保持固定表头和表体宽度一致,dom中js的妙用.docx

    退一步，对下表使用鼠标进入事件，虽然能实现上下表宽度保持一致，但是网页给用户的第一印象是上下表宽度不同，表格列错位。 使用文档完成事件，也不行，这个事件发生在表格内容填充之前。 此种情况下，拾起被摒弃的...

    带合计行的多层表头组件TDataGridViewEx演示程序

    一个继承自DataGridView的表格组件TDataGridViewEx演示程序，具有功能：...7）点击垂直滚动条顶/底端可以到第一/最末行。有关该组件的设计技术请参考拙文http://blog.csdn.net/hulihui/archive/2008/08/22/2815118.aspx

    解决Antd Table组件表头不对齐的问题

    1、对表格的每一行 【columns】设置width属性（留出一行进行宽度自适应）； 2、scroll属性中的x选择一个合适的值（或者直接设为 max-content）； 如果以上两步仍解决不了对齐问题的话，请继续第三步操作 3、对table...

    微信小程序 表格

    mini-program-table微信小程序 表格实现功能:�固定表头固定表格中首列内容可滚动列宽自适应

    asp.net 锁定gridview首行、前几列

    附详细使用说明，非常简单，解决问题直接了当。

    利用js+css+html实现固定table的列头不动

    话不多说，跟这小编来一起看下吧 1、CSS &lt;style type="text/css"&gt;... //把表头的宽度设置到会滚动的页头去 var copyWidth = function () { var b = $('#data_tbody').prev().find('tr:last').fi

    flutter_horizontal_data_table:Flutter固定列水平数据表小部件

    horizo​​ntal_data_table Flutter Widget，用于创建水平表，左侧固定列。安装该程序包开始支持声音为零的安全性。 尽管该软件包是手动迁移的，并已通过每个功能进行了测试，但如果集成/迁移存在任何问题，请随时在...

    vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)

    mounted() { 　// 在mounted中监听表格scroll...// target中的属性很多，可以通过控制台查看—-clientWidth可以获取除滚动条外的可视区域宽度 adjustTable(event) { this.clientWidth = event.target.clientWidth; },

    《程序天下：JavaScript实例自学手册》光盘源码

    第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...

    程序天下:JavaScript实例自学手册

    第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...

    Delphi美化DBGrid控件表头、格线及颜色等，纯Delphi代码

    内容索引:Delphi源码,数据库应用,DBGrid　纯Delphi...那么解决问题的方法是我们自己动手美化DBGrid，改变表头、网格、格线前景色和背景色，以及字体大小等，其实也很简单，相信你看了本代码后就会明白其中的原理了。

    PHPExcel冻结（锁定）表头的简单实现方法

    本文实例讲述了PHPExcel冻结（锁定）表头的简单实现方法。分享给大家供大家参考，具体如下： PHPExcel是一款功能比较强大的操作微软...上面代码就是冻结表格的第一行，可能大家会对这个方法有些疑惑，为什么这样就是冻

Magicbox
Global site tag (gtag.js) - Google Analytics