ITPub博客

首页 > 数据库 > 数据库开发技术 > 利用CSS 锁定表头和表列

利用CSS 锁定表头和表列

原创 数据库开发技术 作者:cosmoboy 时间:2004-10-28 09:51:05 0 删除 编辑

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

对于表头,已开始就可以设定。设定列的时候,可以采用循环设置每个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:





















































































NameMajorSexEnglishJapaneseCalculusGeometry
223232323545454523232323
223232323545454523232323
223232323545454523232323
223232323545454523232323
223232323545454523232323
223232323545454523232323
223232323545454523232323
223232323545454523232323

参考:

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

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

上一篇: 搜城行动
请登录后发表评论 登录
全部评论

注册时间:2008-07-17

  • 博文量
    22
  • 访问量
    1371108