固定表格第一行(表头固定)，其他行可以上下滚动
本文来源：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>
固定表格第一行(表头固定)，其他行可以上下滚动相关推荐
- Excel固定第一行表头——冻结窗口
需求背景:excel表列数太多,记不住每列的意思,当拖动滚屏浏览数据是,需要对照着看那些列代表的数据的意义,这时需要表头一行固定来对照下面各行数据. 选中第一行表头的下面一行(第2行)--冻结窗口 如 ...
- layui表头宽度和表格一致_layui表格如何把表头固定
layui表格如何把表头固定 发布时间:2020-09-21 09:58:37 来源:亿速云 阅读:126 作者:小新 小编给大家分享一下layui表格如何把表头固定,希望大家阅读完这篇文章后大所收获 ...
- php表格增加一行数据,““vb中数据库内容输出到excel如何把表格第一行合并添加一个大标题...
excel表格上面和下面都有行怎么在中间添加一行 excel表面和下面都有行怎么在中间添加一行的方法如下: 1.打开要处理的文档, 2.标定位到要插入的位置之后,比如要在2,3行之间插入,就定位到第3 ...
- element表格第一行写背景色
文档中有方法 <el-table :data="tableData" stripe style="width: 100%" :header-cell-st ...
- VUE element-ui 之table表格第一行插入输入框
步骤: 模板中配置列: <el-table-column label="序号" width="70" align="center"&g ...
- java 表头固定_BootStrap的table表头固定tbody滚动的实例代码
关于bootstrap table其他知识不多说,直接给大家贴代码了. 关键代码如下所示: 栏目一栏目二栏目三栏目一栏目二栏目三 星期一星期二星期三星期一星期二星期三星期一星期二 星期二 星期三星期一 ...
- Excel表格 / WPS表格中怎么在下拉滚动时让第一行标题固定住？
视图-->找到并点击"冻结窗格"-->"冻结首行",就行了 效果如下截图:
- 表格第一行固定，下面
下面写一个很简单的例子: 布局: <div><table id="tableHeader" class="table table-hover table ...
- 小程序绘制表格table（表头固定，可上下左右滑动）
某天在写小程序表格时偶然发现小程序没有table标签,在微信小程序社区搜索了一番发现官方给出的说法是view能够满足table样式,足以替代table标签. 以下用原生的小程序代码写了一版简单的表格, ...
最新文章
- oracle数据库装不成功,oracle 10.2.0.4安装 创建数据库时 em不成功需要大的补丁
- 云供应商安全评估：小心落入陷阱
- cjson使用_LiteOS云端对接教程01-cJSON组件使用教程
- 计算机视觉与深度学习 | TensorMask: A Foundation for Dense Object Segmentation（何凯明团队新作）近5年目标检测综述
- python邮件图片加密_Python爬虫如何应对Cloudflare邮箱加密
- Linux下开启/关闭防火墙命令
- shiro学习(24)：Spring的transaction-manager的用法
- QT环境配置：QT5.8.0与VS2013环境配置
- PHP距离春节还剩多少天,2019年春节倒计时 现在距离2019年春节还有多少天 - 中国万年历...
- mysql jdbc linux,linux mysql jdbc 权限问题_MySQL
- 用倍增方式查询本表数据再插入到本表，用作测试数据
- wifiManager的简单调试
- mcollective的web控制台---mcomaster搭建
- VMware Converter迁移linux系统虚拟机
- PHP+MySQL实现读写分离
- vs2005中文版/2010中文旗舰版等安装步骤和注意
- xos虚拟系统 代理服务器,VMware宝典:一手缔造超级虚拟网络
- Python的学习笔记案例4--52周存钱挑战5.0
- 摸底10余家一线互联网公司大数据架构图：Hadoop渗透力太强！
- 各种区块链浏览器的地址总汇