没有合适的资源?快使用搜索试试~ 我知道了~
html固定表格头和列
5星 · 超过95%的资源 需积分: 9 198 下载量 61 浏览量
2009-09-09
09:19:17
上传
评论 1
收藏 6KB TXT 举报
温馨提示
试读
10页
html固定表格头和列,需要的赶紧下载吧,呵呵
资源推荐
资源详情
资源评论
做页面表格展现的时候,经常会遇到一种情况 -- 将第一行和第一列的固定,便于数据阅读(统计数据表通常要求不分页),自己做的过程中遇到一些小麻烦,网络上看都有人用JS实现表头固定,但是此时表头却是透明的,下拉下去的时候看着太不舒服,偶然间看到一篇单纯用CSS实现而且巨容易,简略的说就是用到expression,position: relative,而且容易扩展,也有的代码无需结构改动,只要在固定的行、列加入class = ""即可,而且固定的行和列可以任意选择,不止一行或者一列,发出来大家一起分享。
(今天登录,看到系统消息:发帖被评为新手帖,扣10分。有点不太明白,不能随便发帖啊呵呵。不过新手的确是,2007年毕业到现在从事软件开发满打满算一年,正在学习中.....现在处在代码工人向编程思想转变的过程中...嘻嘻)
TopLeftHeadStatic.css
.FixedTitleRow
{
position: relative;
top: expression(this.offsetParent.scrollTop);
z-index: 10;
background-color: #E6ECF0;
}
.FixedTitleColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.scrollLeft);
}
.FixedDataColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
background-color: #E6ECF0;
}
TopLeftHeadStatic.htm
<html>
(今天登录,看到系统消息:发帖被评为新手帖,扣10分。有点不太明白,不能随便发帖啊呵呵。不过新手的确是,2007年毕业到现在从事软件开发满打满算一年,正在学习中.....现在处在代码工人向编程思想转变的过程中...嘻嘻)
TopLeftHeadStatic.css
.FixedTitleRow
{
position: relative;
top: expression(this.offsetParent.scrollTop);
z-index: 10;
background-color: #E6ECF0;
}
.FixedTitleColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.scrollLeft);
}
.FixedDataColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
background-color: #E6ECF0;
}
TopLeftHeadStatic.htm
<html>
<head>
<link rel=stylesheet href='TopLeftHeadStatic.css'>
</head>
<body>
<div id = "scrolDiv" style="width: 60%; overflow: auto; cursor: default; display: inline; position: absolute; height: 20%;">
<table id = "DataTable" cellpadding='0' cellspacing='0' style="table-layout: auto" bordercolor="lightgrey" border = "1" width="120%" height="30%">
<tr class = "FixedTitleRow">
<td colspan = "6" align = "center">
商业运行动态
</td>
</tr>
<tr class = "FixedTitleRow">
<td class = "FixedTitleColumn" align = "center" width = "15%">
商业企业
</td>
<td align = "center" width = "10%">
到货量
</td>
<td align = "center" width = "10%">
分拣打码量
</td>
<td align = "center" width = "10%">
零售户退货量
</td>
<td align = "center" width = "10%">
商商调剂量
<link rel=stylesheet href='TopLeftHeadStatic.css'>
</head>
<body>
<div id = "scrolDiv" style="width: 60%; overflow: auto; cursor: default; display: inline; position: absolute; height: 20%;">
<table id = "DataTable" cellpadding='0' cellspacing='0' style="table-layout: auto" bordercolor="lightgrey" border = "1" width="120%" height="30%">
<tr class = "FixedTitleRow">
<td colspan = "6" align = "center">
商业运行动态
</td>
</tr>
<tr class = "FixedTitleRow">
<td class = "FixedTitleColumn" align = "center" width = "15%">
商业企业
</td>
<td align = "center" width = "10%">
到货量
</td>
<td align = "center" width = "10%">
分拣打码量
</td>
<td align = "center" width = "10%">
零售户退货量
</td>
<td align = "center" width = "10%">
商商调剂量
剩余9页未读,继续阅读
kooen_chen
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
- 3
前往页