相信 大家都有過 一個表格中有大量的數據，擋在前臺或後臺顯示的時候，過多的數據會把表格顯示的很寬 或很長，從而給用戶的體驗大打折扣， 大家 也可能會想到很多的解決方案解決這一問題。
我的方案就是 能不能把 其 表格的 的表頭 或者 列 固定住，從而實現 當用戶 拉動垂直滾動條的時候， 表頭行固定位置不變動， 當用戶拉動水平滾動條時，表頭列 不變動。
今天就 分享一個 關於 html 表格凍結表頭 和 列 的代碼， 這個也是我最近項目中的 部分 內容 ，我把其 提取出來共享給大家。
創建一個樣式文件 ，命名爲：cssTopLeftHeadStatic.css
/*
@ CSS TopLeftHeadStatic
@ 作者：宋延軍
@ 功能：專門 凍結 Html 表頭行 + 表頭列
@ 日期：2011-12-28 下午20:18:22
@ 郵箱：[email protected]
@ 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！！！