css 表头不滚动,css固定表头不随滚动条移动.doc

深藏阁楼爱情的钟 2022-09-02 15:40 313阅读 0赞

先说效果描述如图：涉及到数据保密的缘故所以数据弄掉了。效果为：整个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;

\}

table.lock

\{

border-collapse:collapse;

border-right:gray 1px solid;

border-bottom:gray 1px solid;

border-color: gray;

\}

td.Locked /\* TD标签水平与垂直方向锁住单元格, 不随鼠标或滚动条移动 \*/

\{

z-index: 30; position: relative;

top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);

left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);

background-color: \#cccccc; text-align: center;

/\*border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray; \*/

border-left:gray 1px solid;

border-top:gray 1px solid;

\}

th.Locked /\* TH标签水平与垂直方向锁住单元格, 不随鼠标或滚动条移动 \*/

\{

z-index: 30; position: relative;

top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);

left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);

background-color: \#cccccc; text-align: center;

/\*border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray; \*/

border-left:gray 1px solid;

border-top:gray 0px solid;

\}

tr.TrLocked

\{

z-index: 30; position: relative;

top: expression(parentNode.parentNode.parentNode.scrollTop);

/\*left: expression(parentNode.parentNode.parentNode.scrollLeft);\*/

background-color: \#cccccc; text-align: center;

/\*border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray; \*/

border-left:gray 1px solid;

border-top:gray 0px solid;

\}

th.HLoc

发表评论取消回复

表情：

评论列表（有 0 条评论，313人围观）

还没有评论，来说两句吧...

相关阅读

相关 table表头固定并添加滚动条

实现表头锁定的方式很多，这里这种方式是比较简单，并且是没有任何问题的；完整代码示例： <!DOCTYPE html>

古城微笑少年丶/ 2024年02月19日 17:01/ 0 赞/ 92 阅读

相关 jquery滚动监听，并且固定表头

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title

缺乏、安全感/ 2023年08月17日 15:44/ 0 赞/ 175 阅读

相关 vue+element固定表头滚动条导致表头错误

解决方法 1. untl.js 封装一个公共的方法 // 重置表格 resetTableDom(table

你的名字/ 2023年06月17日 10:57/ 0 赞/ 51 阅读

相关 css控制背景图片不随滚动条滚动

背景属性 background-attachment: fied 可以让背景图片固定：（小技巧：让元素占满整个屏，如下） <template>

亦凉/ 2023年02月11日 04:39/ 0 赞/ 60 阅读

相关 php底部固定滚动,CSS控制DIV永远固定在页面底部不随滚动而滚动

复制代码代码如下: html,body \{ width:100%; height:100%; margin:0px; padding:0px; overflow:

忘是亡心i/ 2023年01月17日 02:24/ 0 赞/ 291 阅读

相关 html不随页面滚动条滚动,css如何让元素不随滚动条滚动？

我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置，无论如何滚动滚动条，位置不变。那么如何让元素不随滚动条滚动？下面给大家介绍一下方法。有一定的参考价值，有需要的朋友可

偏执的太偏执、/ 2022年10月06日 00:58/ 0 赞/ 605 阅读

相关 css 表头不滚动,css固定表头不随滚动条移动.doc

先说效果描述如图：涉及到数据保密的缘故所以数据弄掉了。效果为：整个grid数据会出现横向，竖向滚动条。其中所有的表头：操作，序号，测试1.。。。等等要素，不会随着竖向滚动条的滚

深藏阁楼爱情的钟/ 2022年09月02日 15:40/ 0 赞/ 314 阅读

相关【CSS】fixed绝对定位水平垂直居中不随滚动条而移动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゞ浴缸里的玫瑰/ 2022年05月24日 23:07/ 0 赞/ 249 阅读

相关 layui表格的表头不滚动

步奏： 1、设置两个table，第一个table有thead没有tbody，第二个table有tbody没有table； 2、第二个table需要一个div包住，并设置宽

左手的ㄟ右手/ 2022年05月14日 05:12/ 0 赞/ 369 阅读

相关 css background-attachment:fixed 固定背景、不随内容一起滚动

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 兼容性：全兼容，只不过IE滚动时会有一点不流畅。 b

以你之姓@/ 2022年03月26日 12:50/ 0 赞/ 453 阅读