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

最新推荐文章于 2024-05-30 16:22:27 发布

iteye_3158

最新推荐文章于 2024-05-30 16:22:27 发布

阅读量145

点赞数

文章标签： xhtml

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

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

今天就分享一个关于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！！！