一种使用CSS固定表头和列的方法

固定表头的CSS:
thead th, thead th.locked {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
}
 
thead th {
top: expression(document.getElementById("tbl-container").scrollTop-2); /* IE5+ only */
z-index: 20;
}
固定列的CSS:

td.locked,  th.locked{
background-color: #ffeaff;
font-weight: bold;
border-right: 1px solid silver;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); /* IE5+ only */
position: relative;
z-index: 10;
}
要注意的是td.locked的z-index比th.locked的低.

界面上的JS函数用于切换是否固定第一列.
var table = document.getElementById(tblID);
 var cTR = table.getElementsByTagName("TR");  //取得所有TR行对象
 
 //未locked
 if (table.rows[0].cells[0].className == '') {
  for (i = 0; i < cTR.length; i++)
   {
   var tr = cTR.item(i);
   tr.cells[0].className = 'locked' //每行的第一列被locked,其实可以设置任意行为locked
   }
  document.getElementById('toggle').innerText = "Unlock First Column";
  }
  else {
  for (i = 0; i < cTR.length; i++)
   {
   var tr = cTR.item(i);
   tr.cells[0].className = ''  // 取消locked.
   }
  document.getElementById('toggle').innerText = "Lock First Column";
  }

示例下载:/Files/margiex/test.rar

参考引文:
http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html
http://web.tampabay.rr.com/bmerkey/examples/locked-column.css.html

另还有一个示例可以拖动每列:
http://web.tampabay.rr.com/bmerkey/examples/move-lock-col.html