jsp頁面鎖定表格的第一行不動的方法是透過js實現的。

1、html程式碼如下：

<div>

<table>

<tr>

<th> </th>

</tr>

</table>

</div>

<div>

<table>

<tr>

<th>Bus</th>

<th>Plane</th>

<th>Boat</th>

<th>Bicycle</th>

</tr>

</table>

</div>

<div>

<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>

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

});