css,表格,表头
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
竭诚为您提供优质文档/双击可除
css,表格,表头
篇一：css固定表头不随滚动条移动
先说效果描述如图：涉及到数据保密的缘故所以数据弄掉了。效果为：整个grid数据会出现横向，竖向滚动条。其中所有的表头：操作，序号，测试1.。。。等等要素，不会随着竖向滚动条的滚动而发生下移动的变化。而“操作”，“序号”，“测试1”，“测试2”，“测试3”，“测试4”，“测试5”这几个列的要素则进行了横向固定，不会随横向滚动条的移动而移动。当横向滚动条向右边移动时，右边的要素往左边的移动部分会被左边的要素遮罩住。所以图里看到“测试6”，“测试7”直到“测试12”这几个title都被遮盖了，因为横向滚动条往右边移动了。
①把下面的css保存起来作为.css文件，然后在jsp页面进行引入
div#divcontainer
{
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);
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;
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);
/**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;