Question

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

表格不动的情况下

Answer 1

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

<div class="clscroll corner-header">
<table>
<tr>
<th> </th>
</tr>
</table>
</div>
<div class="clscroll column-headers" id="clscroll-column-headers">
<table>
<tr>
<th>Bus</早族th>
<th>Plane</th>
<th>Boat</th>
<th>Bicycle</th>
</tr>
</table>
</div>
<div class="clscroll row-headers" id="clscroll-row-headers">
<table>
<tr>
<th>Red</th>
</tr>
<tr>
<th>Green</th>
</tr>
<tr>
<th>Blue</th>
</tr>
<tr>
<th>Orange</th>
</tr>
<tr>
<th>Purple</th>
</tr>
<tr>
<th>Yellow</th>
</tr>
<tr>
<th>Pink</th>
</tr>
<tr>
<th>Brown</th>
</tr>
</table>
</div>
<div class="clscroll table-content" id="clscroll-content">
<table>
<tr>
<td>Red Bus</td>
<td>Red Plane</td>
<td>Red Boat</td>
<td>Red Bicycle</td>
</tr>
<tr>
<td>Green Bus</td>
<td>Green Plane</td>
<td>Green Boat</td>
<td>Green Bicycle</td>
</tr>
<tr>
<td>Blue Bus</td>
<td>Blue Plane</td>
<td>Blue Boat</td>
<td>Blue Bicycle</td>
</tr>
<tr>
<td>Orange Bus</td>
<td>Orange Plane</td>
<td>Orange Boat</td>
<td>Orange Bicycle</td>
</tr>
<tr>
<td>Purple Bus</td>
<td>Purple Plane</td>
<td>Purple Boat</td>
<td>Purple Bicycle</td>
</唤睁和tr>
<tr>
<td>Yellow Bus</td>
<td>Yellow Plane</td>
<td>Yellow Boat</td>
<td>Yellow Bicycle</td>
</tr>
<tr>
<td>Pink Bus</td>
<td>Pink Plane</td>
<td>Pink Boat</td>
<td>Pink Bicycle</td>
</tr>
<tr>
<td>Brown Bus</td>
<td>Brown Plane</td>
<td>Brown Boat</和盯td>
<td>Brown Bicycle</td>
</tr>
</table>
</div>

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());
});

Answer 2

同一个表格，肯定不行。

可以用一个div来模拟。

Answer 3

JSP 实现 冻结窗口。

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