1 13
竭诚为您提供优质文档/双击可除
css,表格,表头
篇一：css固定表头不随滚动条移动
先说效果描述如图：涉及到数据保密的缘故所以数据弄
掉了。效果为：整个grid数据会出现横向，竖向滚动条。
其中所有的表头：操作，序号，测试1.。。。等等要素，不会
随着竖向滚动条的滚动而发生下移动的变化。而“操作”，“序
号”，“测试1”，“测试2”，“测试3”，“测试4”，“测试5”
这几个列的要素则进行了横向固定，不会随横向滚动条的移
动而移动。当横向滚动条向右边移动时，右边的要素往左边
的移动部分会被左边的要素遮罩住。所以图里看到“测试6”，
“测试7”直到“测试12”这几个title都被遮盖了，因为
横向滚动条往右边移动了。
①把下面的css保存起来作为.css文件，然后在jsp页
面进行引入
div#divcontainer
{
2 13
height:300px;overflow:auto;overflow-y:scorll;margin
-top:-1px;-1px;
}
table.lock
{
border-collapse:collapse;
border-right:gray1pxsolid;
border-bottom:gray1pxsolid;
border-color:gray;
}
td.locked/*td标签水平与垂直方向锁住单元格,不随
鼠标或滚动条移动*/{
z-index:30;position:relative;
top:
expression(parentnode.parentnode.parentnode.parentn
ode.scrolltop);
left:
expression(parentnode.parentnode.parentnode.parentn
ode.scrollleft);
3 13
background-color:#cccccc;text-align:center;
/*border-top:solid0pxgray;border-bottom:solid1pxgra
y;border-left:solid0pxgray;border-right:solid1pxgra
y;*/border-left:gray1pxsolid;
border-top:gray1pxsolid;
}
th.locked/*th标签水平与垂直方向锁住单元格,不随
鼠标或滚动条移动*/{
z-index:30;position:relative;
top:
expression(parentnode.parentnode.parentnode.parentn
ode.scrolltop);
left:
expression(parentnode.parentnode.p(css,表格,表
头)arentnode.parentnode.scrollleft);
background-color:#cccccc;text-align:center;
/*border-top:solid0pxgray;border-bottom:solid1pxgra
y;border-left:solid0pxgray;border-right:solid1pxgra
y;*/border-left:gray1pxsolid;
4 13
border-top:gray0pxsolid;}
tr.trlocked
{
z-index:30;position:relative;
top:expression(parentnode.parentnode.parentnode.scr
olltop);
/*left:
expression(parentnode.parentnode.parentnode.scrolll
eft);*/background-color:#cccccc;text-align:center;
/*border-top:solid0pxgray;border-bottom:solid1pxgra
y;border-left:solid0pxgray;border-right:solid1pxgra
y;*/border-left:gray1pxsolid;
border-top:gray0pxsolid;
}
th.hlocked/*th标签水平方向锁住单元格*/
{
z-index:1;position:relative;left:expression(parentn
ode.parentnode.parentnode.parentnode.scrollleft);
5 13
/**background-color:#cccccc;text-align:center;**/
/*border-top:solid0pxgray;border-bottom:solid1pxgra
y;border-left:solid0pxgray;border-right:solid1pxgra
y;*/
/*border-left:gray1pxsolid;
border-top:gray1pxsolid;*/
background:no-repeatrighttoprgb(33,136,104);padding
:0px;border:0pxcurrentcolor;text-align:center;color
:rgb(235,235,235);font-weight:bold;font-size:12px;h
eight:20px;
}
th.other{
/**border-left:gray1pxsolid;
border-top:gray1pxsolid;**/
background:no-repeatrighttoprgb(33,136,104);padding
:0px;border:0pxcurrentcolor;text-align:center;color
:rgb(235,235,235);font-weight:bold;font-size:12px;h
eight:20px;
6 13
}
th.Vlocked/*th标签垂直方向锁住单元格*/
{
z-index:1;position:relative;top:expression(parentno
de.parentnode.parentnode.parentnode.scrolltop);
background-color:#cccccc;text-align:center;
border-top:solid0pxgray;border-bottom:solid1pxgray;
border-left:solid0pxgray;border-right:solid1pxgray;}
td.hlocked/*td标签水平方向锁住单元格*/
{
z-index:1;position:relative;left:expression(parentn
ode.parentnode.parentnode.parentnode.scrollleft);
/**background-color:#cccccc;text-align:center;**/
/*border-top:solid0pxgray;border-bottom:solid1pxgra
y;border-left:solid0pxgray;border-right:solid1pxgra
y;*//*border-left:gray1pxsolid;
border-top:gray1pxsolid;*/
7 13
padding:0px;border:0pxcurrentcolor;font-size:12px;h
eight:18px;text-align:center;
}
td.Vlocked/*td标签垂直方向锁住单元格*/
{
z-index:1;position:relative;top:expression(parentno
de.parentnode.parentnode.parentnode.scrolltop);
background-color:#cccccc;text-align:center;
border-top:solid0pxgray;border-bottom:solid1pxgray;
border-left:solid0pxgray;border-right:solid1pxgray;}
td.other{
/**border-left:gray1pxsolid;
border-top:gray1pxsolid;*/
padding:0px;border:0pxcurrentcolor;font-size:12px;h
eight:18px;text-align:center;
}
②jsp页面的结构样例