jsp页面怎么锁定表格中的第一行固定不会随滚动条滚动

表格不动的情况下

2024-12-27 08:02:50

推荐回答（3个）

回答1：

jsp页面锁定表格的第一行不动的方法是通过js实现的。
1、html代码如下：

Bus	Plane	Boat	Bicycle

Red
Green
Blue
Orange
Purple
Yellow
Pink
Brown

Red Bus	Red Plane	Red Boat	Red Bicycle
Green Bus	Green Plane	Green Boat	Green Bicycle
Blue Bus	Blue Plane	Blue Boat	Blue Bicycle
Orange Bus	Orange Plane	Orange Boat	Orange Bicycle
Purple Bus	Purple Plane	Purple Boat	Purple Bicycle
Yellow Bus	Yellow Plane	Yellow Boat	Yellow Bicycle
Pink Bus	Pink Plane	Pink Boat	Pink Bicycle
Brown Bus	Brown Plane	Brown Boat	Brown Bicycle

2、css代码如下：
.clscroll table {
table-layout: fixed;
}
.clscroll td, .clscroll th {
overflow: hidden;
}
.corner-header {
float: left;
}
.column-headers {
float: left;
overflow: scroll;
}
.row-headers {
clear: both;
float: left;
overflow: scroll;
}
.table-content {
table-layout: fixed;
float: left;
overflow: scroll;
}
.clscroll td, .clscroll th {
width: 200px;
border: 1px solid black;
}
.row-headers, .table-content {
height: 100px;
}
.column-headers, .table-content, .table-content table, .column-headers table {
width: 400px;
}

3、js代码如下：

$("#clscroll-content").scroll(function() {//锁定行
$("#clscroll-row-headers").scrollTop($("#clscroll-content").scrollTop());
$("#clscroll-column-headers").scrollLeft($("#clscroll-content").scrollLeft());
});

$("#clscroll-column-headers").scroll(function() {
$("#clscroll-content").scrollLeft($("#clscroll-column-headers").scrollLeft());
});

$("#clscroll-row-headers").scroll(function() {
$("#clscroll-content").scrollTop($("#clscroll-row-headers").scrollTop());
});

回答2：

同一个表格，肯定不行。

可以用一个div来模拟。

回答3：

JSP 实现冻结窗口。

给你一个实例你可以看一下。应该是你要的效果。我这个是固定抬头。和左边第一列的程序你可以研究研究。