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

最新推荐文章于 2021-06-09 21:24:02 发布

SongYanJun2011

最新推荐文章于 2021-06-09 21:24:02 发布

阅读量3.8k

点赞数

分类专栏： DW5 + CSS 文章标签： ie class stylesheet html xhtml border

本文链接：https://blog.csdn.net/songyanjun2011/article/details/7186335

版权

DW5 + CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

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

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

SongYanJun2011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
表格冻结表头和列代码分享（目前只支持IE）

相信大家都有过一个表格中有大量的数据，挡在前台或后台显示的时候，过多的数据会把表格显示的很宽或很长，从而给用户的体验大打折扣，大家也可能会想到很多的解决方案解决这一问题。我的方案就是能不能把其表格的的表头或者列固定住，从而实现当用户拉动垂直滚动条的时候，表头行固定位置不变动，当用户拉动水平滚动条时，表头列不变动。今天就分享一个关于 h
复制链接

扫一扫