2008-06-01
CSS 表头固定
关键字: css 表头固定
做页面表格展现的时候，经常会遇到一种情况 -- 将第一行和第一列的固定，便于数据阅读（统计数据表通常要求不分页），自己做的过程中遇到一些小麻烦，网络上看都有人用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>
<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%">
商商调剂量
</td>
<td align = "center" width = "10%">
库存量
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">
北京市烟草公司
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
<td align = "right">
100.34
</td>
</tr>
</table>
</div>
</body>
</html>
将CSS、htm内容保存，存放到同一目录就可以看到预览效果了。有个小问题，当我表格内容是通过innerHTML写到iframe中时，左侧第一列列我只能控制初始时确定的那些行，根据数据库自动填上的我拉动横向scroll时，不是固定的，正在研究解决中。
- by littlebode
- 浏览 (405)
- 评论 (4)
- 相关推荐
评论
一是FF压根就不支持CSS的expression
二是IE下你用expression，应该非常耗费系统资源吧。
所以说，这种需求，还是只能用JS来做，当然，如果不考虑跨浏览器的话，expression这种方法就足够好，足够简洁，维护了。可现在，我觉得每个网站都会考虑FF了吧。