您的位置：首页 > 编程语言

表格 冻结 表头 和 列 代码分享（目前只支持IE）

2012-01-09 09:09 375 查看
相信 大家都有过 一个表格中有大量的数据，挡在前台或后台显示的时候，过多的数据会把表格显示的很宽
或很长，从而给用户的体验大打折扣，
大家 也可能会想到很多的解决方案解决这一问题。

我的方案就是
能不能把 其 表格的 的表头 或者 列 固定住，从而实现 当用户 拉动垂直滚动条的时候， 表头行固定位置不变动，
当用户拉动水平滚动条时，表头列
不变动。

今天就
分享一个 关于 html 表格冻结表头 和 列 的代码，
这个也是我最近项目中的
部分 内容
，我把其 提取出来共享给大家。

创建一个样式文件
，命名为：cssTopLeftHeadStatic.css

/*
@ CSS TopLeftHeadStatic
@ 作者：宋延军
@ 功能：专门  冻结 Html 表头行 + 表头列
@ 日期：2011-12-28 下午20:18:22
@ 邮箱：songyanju_stars@126.com
@ QQ号：181744926
*/
@charset "utf-8";
/* 数据表头行 */
.FixedTitleRow
{
position: relative;
top: expression(this.offsetParent.scrollTop);
z-index: 10;
/*background-color: #E6ECF0;*/
background-color: #e6e6e0;
}
/* 数据表头列 */
.FixedTitleColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.scrollLeft);
}
/* 数据列 */
.FixedDataColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
/*background-color: #E6ECF0;*/
background-color: #e6e6e0;
}


在创建一个测试HTML文件， 命名为： TopLeftHeadStatic.html

<!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=utf-8" />
<link rel=stylesheet href='cssTopLeftHeadStatic.css' />

</head>

<body>
<div id = "scrolDiv" style="width: 900px; 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 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>
<td align = "center" width = "10%">  用户性别  </td>
<td align = "center" width = "10%">  最后更新日期  </td>
</tr>

<tr>
<td class = "FixedDataColumn" align = "left"> 管理员1 </td>
<td align = "right"> 军哥就是帅    </td>
<td align = "right"> 123123       </td>
<td align = "right"> 2011-12-28   </td>
<td align = "right"> 宋延军        </td>
<td align = "right"> 1503******8  </td>
<td align = "right"> 男           </td>
<td align = "right"> 2011-12-28   </td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left"> 管理员2 </td>
<td align = "right"> 军哥就是帅    </td>
<td align = "right"> 123123       </td>
<td align = "right"> 2011-12-28   </td>
<td align = "right"> 宋延军        </td>
<td align = "right"> 1503******8  </td>
<td align = "right"> 男           </td>
<td align = "right"> 2011-12-28   </td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left"> 管理员3 </td>
<td align = "right"> 军哥就是帅    </td>
<td align = "right"> 123123       </td>
<td align = "right"> 2011-12-28   </td>
<td align = "right"> 宋延军        </td>
<td align = "right"> 1503******8  </td>
<td align = "right"> 男           </td>
<td align = "right"> 2011-12-28   </td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left"> 管理员4  </td>
<td align = "right"> 军哥就是帅    </td>
<td align = "right"> 123123       </td>
<td align = "right"> 2011-12-28   </td>
<td align = "right"> 宋延军        </td>
<td align = "right"> 1503******8  </td>
<td align = "right"> 男           </td>
<td align = "right"> 2011-12-28   </td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left"> 管理员6  </td>
<td align = "right"> 军哥就是帅    </td>
<td align = "right"> 123123       </td>
<td align = "right"> 2011-12-28   </td>
<td align = "right"> 宋延军        </td>
<td align = "right"> 1503******8  </td>
<td align = "right"> 男           </td>
<td align = "right"> 2011-12-28   </td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left"> 管理员7 </td>
<td align = "right"> 军哥就是帅    </td>
<td align = "right"> 123123       </td>
<td align = "right"> 2011-12-28   </td>
<td align = "right"> 宋延军        </td>
<td align = "right"> 1503******8  </td>
<td align = "right"> 男           </td>
<td align = "right"> 2011-12-28   </td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left"> 管理员9 </td>
<td align = "right"> 军哥就是帅    </td>
<td align = "right"> 123123       </td>
<td align = "right"> 2011-12-28   </td>
<td align = "right"> 宋延军        </td>
<td align = "right"> 1503******8  </td>
<td align = "right"> 男           </td>
<td align = "right"> 2011-12-28   </td>
</tr>
<tr>
<td class = "FixedDataColumn" align = "left">  管理员10  </td>
<td align = "right"> 军哥就是帅    </td>
<td align = "right"> 123123       </td>
<td align = "right"> 2011-12-28   </td>
<td align = "right"> 宋延军        </td>
<td align = "right"> 1503******8  </td>
<td align = "right"> 男           </td>
<td align = "right"> 2011-12-28   </td>
</tr>

</table>

</div>
</body>
</html>


Over！！！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航