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

最新推荐文章于 2023-11-23 11:09:09 发布

weixin_34119545

最新推荐文章于 2023-11-23 11:09:09 发布

阅读量149

点赞数

固定表头的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";
  }