利用CSS 锁定表头和表列

锁定的关键是设置距离表头或左侧某个参照物的位置不变。

对于表头，已开始就可以设定。设定列的时候，可以采用循环设置每个td的距离实现。

[@more@]

用到的css:

body {
background-color: white;
color: black;
}

div#tbl-container {
width: 418px;
height: 122px;
overflow: auto;
scrollbar-base-color:#ffeaff;
}

table {
table-layout: fixed;
border-collapse: collapse;
background-color: WhiteSmoke;
}

div#tbl-container table th {
width: 100px;
}

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;
}

thead th.locked {z-index: 30;}

td.locked,  th.locked{
background-color: #ffeaff;
font-weight: bold;
border-right: 1px solid silver;
left: expression(document.getElementById("tbl-container").scrollLeft); /*IE5+ only*/
position: relative;
z-index: 10;
}

td {
padding: 2px 5px 2px 2px;
font-size: 12px;
border-left: 1px solid silver;
border-bottom: 1px solid silver;
text-align: right;
}

button {
width: 150px;
font-weight: bold;
color: navy;
margin-bottom: 5px;
}

html：

Name
Major
Sex
English
Japanese
Calculus
Geometry

223
2323
23
545
4545
2323
2323


223
2323
23
545
4545
2323
2323


223
2323
23
545
4545
2323
2323


223
2323
23
545
4545
2323
2323


223
2323
23
545
4545
2323
2323


223
2323
23
545
4545
2323
2323


223
2323
23
545
4545
2323
2323


223
2323
23
545
4545
2323
2323

参考：

http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/33590/viewspace-779838/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/33590/viewspace-779838/