固定表头的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";
}
参考引文:
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