導航:首頁 > 編程語言 > js固定表頭表格滾動

js固定表頭表格滾動

 發布時間：2023-10-07 11:28:02

Ⅰ jsp頁面怎麼鎖定表格中的第一行固定不會隨滾動條滾動

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

Ⅱ html中怎麼固定一個table的表頭和表位，拖動滾動條中間的數據滾動，而表頭和表尾固定呢表尾是用來做合計

給你寫個固定來表頭的例子，固定表尾源的就當是課堂練習，希望你能舉一反三：

<HTML>
<HEAD>
<TITLE> JS Example</TITLE>
<style type='text/css'>
tr.locktop{
position:relative;
top:expression((this.offsetParent.scrollTop>this.parentElement.parentElement.offsetTop?this.offsetParent.scrollTop-this.parentElement.parentElement.offsetTop-1:0)-1);
}
</style>
</HEAD>

<BODY>
表頭前面的內容，這些是可以滾出屏幕的，只有表頭鎖定。
<table id=pol_table_list cellspacing=0>
<tr class=locktop><th>表頭
<tr><td>1
<tr><td>2
<tr><td>3
<tr><td>4
<tr><td>5
<tr><td>6
<tr><td>7
<tr><td>8
<tr><td>9
<tr><td>10
</table>
</BODY>
</HTML>

把瀏覽器窗口調得很小，才能看到效果，向下滾動的時候表頭是固定的

Ⅲ 如何固定table的第一行，不隨縱向滾動條滾動，但能橫向滾動

可能會分3種情況：
1、瀏覽器的窗體滾動，這個估計每個瀏覽器都不一樣，記得以前IE中縱向不超屏幕，橫向超過一屏，用滾輪就橫著滾，沒測試。
2、iframe中的窗體滾動。
3、div中的內容overflow滾動。

1是隨著屏幕解析度計算，比較難控制。
2與3是可以用寬度高度控制，也可以由js判斷初始化或者後續控制。

有了這些基礎後，推薦使用js進行控制，當scroll的時候把y軸的變化轉換到x軸上，根據以上情況的不同，控制好用戶體驗。

Ⅳ html 如何讓一個表的前幾列固定，不隨著滾動條移動

1、首先新建一個web項目，主要用到了html文件和css文件。

Ⅳ jsp 固定表格表頭 css 或者 js 都行，只要功能實現

jsp固定表頭可以用通用表頭實現，數據用循環處理即可。
參考代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>固定表頭</title>

</head>

<style type="text/css">

.fixedtd{

color:#FF0000;

position:relative;

top: expression(this.parentElement.parentElement.parentElement.scrollTop)

z-index:1;

}

</style>

<body>

<div style="overflow:auto; height:100px;">

<table width="667" cellpadding="0" cellspacing="0" border="1">

<tr bgcolor="#999999">

<td class="fixedtd" width="86">表頭</td>

<td class="fixedtd" width="120">表頭</td>

<td class="fixedtd" width="439">表頭</td>

</tr>

<tr>

<td>內容1</td>

<td> </td>

<td> </td>

</tr>

<tr>

<td>內容2</td>

<td> </td>

<td> </td>

</tr>

<tr>

<td>內容3</td>

<td> </td>

<td> </td>

</tr>

<tr>

<td>內容4</td>

<td> </td>

<td> </td>

</tr>

<tr>

<td>內容5</td>

<td> </td>

<td> </td>

</tr>

<tr>

<td>內容6</td>

<td> </td>

<td> </td>

</tr>

</table>

</div>

</body>

</html>

Ⅵ angularjs中如何固定表頭，表頭固定，數據可以滾動

推薦使用angular-ui-grid：
使用方法：
app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions.columnDefs = [
{ name: 'id', pinnedLeft:true },
{ name: 'name'},
{ name: 'age'}]);

Ⅶ 通過JS，將列表實現5秒滾動

改成：

vartop=parseInt(hotListDiv.style.top);
if(top<=-700){
hotListDiv.style.top="0px";
}
else{
hotListDiv.style.top=(top-70)+"px";
}
閱讀全文

與js固定表頭表格滾動相關的資料

熱點內容
word文件夾前面有個符號 瀏覽：350
把word轉換成語音 瀏覽：220
linuxfile文件 瀏覽：454
如何用網路打普通電話 瀏覽：463
linux進程打開的文件 瀏覽：134
新購u盤無法儲存文件 瀏覽：553
5s要不要升級ios93 瀏覽：926
小米手機助手怎麼關閉自動升級 瀏覽：24
外星人能不能升級到win10系統盤 瀏覽：652
加入java信任站點 瀏覽：486
好用的急救知識app 瀏覽：524
什麼是網路適配器驅動文件名 瀏覽：717
吉林文件箱多少錢 瀏覽：113
ae模板版本 瀏覽：204
手機qq步數功能在哪裡 瀏覽：721
c程序設計04737 瀏覽：403
女孩什麼年齡學編程 瀏覽：976
安慶如何做網路營銷推廣 瀏覽：620
什麼是數據標准化 瀏覽：708
aecc三維功能實例視頻教程 瀏覽：719

友情鏈接