table滾動時固定首行

轉自：http://blog.csdn.net/qq378527566/article/details/7786126

效果圖如下：

初始化的畫面：

拉動滾動條：

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>固定表頭</title>
</head>
<style>
#box{
height:214px;
width:500px;
overflow-y:auto;/** 必須，否則當表格資料過多時，不會產生滾動條，而是自動延長該div的高度 */
position:relative;/** 必須，若不設定，拷貝得來的表頭將相對於其設定該屬性為該值的父節點（或間接父節點）定位，如果沒有，則相對於body */
}
table,tr,td,th{
border:1px solid #ccd;
border-collapse:collapse;
}
table{
width:100%;
}
td{
height:24px;
width:50px;/** 固定單元格寬度，防止分離表頭後，表頭與資料行錯位（缺點） */
line-height:24px;
padding:3px 5px;
background-color:#ddd;
word-break:break-all;/** 設定當文字過長時換行 */
}
th{
height:24px;
width:50px;/** 不管是固定畫素或是百分比，應與對應資料列的寬度一致 */
line-height:24px;
background-color:#cfc;
}
</style>
<SCRIPTLANGUAGE="JavaScript">
<!--
/**
* 功能：固定表頭
* 引數 viewid 表格的id
* scrollid 滾動條所在容器的id
* size 表頭的行數（複雜表頭可能不止一行）
*/
function scroll(viewid,scrollid,size){
// 獲取滾動條容器
var container = document.getElementById(scrollid);
// 將表格拷貝一份
var tb2 = document.getElementById(viewid).cloneNode(true);
// 獲取表格的行數
var len = tb2.rows.length;
// 將拷貝得到的表格中非表頭行刪除
for(var i=tb2.rows.length;i>size;i--){
// 每次刪除資料行的第一行
tb2.deleteRow(size);
}
// 建立一個div
var bak = document.createElement("div");
// 將div新增到滾動條容器中
container.appendChild(bak);
// 將拷貝得到的表格在刪除資料行後新增到建立的div中
bak.appendChild(tb2);
// 設定建立的div的position屬性為absolute，即絕對定於滾動條容器（滾動條容器的position屬性必須為relative）
bak.style.position = "absolute";
// 設定建立的div的背景色與原表頭的背景色相同（貌似不是必須）
bak.style.backgroundColor = "#cfc";
// 設定div的display屬性為block，即顯示div（貌似也不是必須，但如果你不希望總是顯示拷貝得來的表頭，這個屬性還是有用處的）
bak.style.display = "block";
// 設定建立的div的left屬性為0，即該div與滾動條容器緊貼
bak.style.left = 0;
// 設定div的top屬性為0，初期時滾動條位置為0，此屬性與left屬性協作達到遮蓋原表頭
bak.style.top = "0px";
bak.style.width = "100%";
// 給滾動條容器繫結滾動條滾動事件，在滾動條滾動事件發生時，調整拷貝得來的表頭的top值，保持其在可視範圍內，且在滾動條容器的頂端
container.onscroll = function(){
// 設定div的top值為滾動條距離滾動條容器頂部的距離值
bak.style.top = this.scrollTop+"px";
}
}
// 在頁面載入完成後呼叫該方法
window.onload = function (){
scroll("tab","box",1);
}
//-->
</SCRIPT>
<body>
<divid="box">
<tableid="tab">
<tr><th>序號</th><th>姓名</th><th>性別</th><th>年齡</th><th>戶籍</th><th>身份</th></tr>
<tr><td>1</td><td>唐三藏</td><td>男</td><td>30</td><td>長安</td><td>佛</td></tr>
<tr><td>2</td><td>孫悟空</td><td>男</td><

相關推薦

table滾動時固定首行

轉自：http://blog.csdn.net/qq378527566/article/details/7786126 效果圖如下：初始化的畫面：拉動滾動條： <!doctype html public "-//w

table固定表頭行及列，其中行包含合併單元格（支援IE，但滑鼠滾動輪滾動效果不太友好）

PS:該程式碼用於學習，大部分不是原創，在他（她）人程式碼的基礎上修改成自己想實現的效果，來源不明，因此沒有加轉載連結，如有問題，先在這裡抱歉，請聯絡我刪除。內容實現的效果與上一篇一樣，但是這個這個用了一點點js去實現IE沒有辦法相容的一些屬性，所以這個版本可以相容IE的高版本和低版本，測試用的版本時IE8

mvc中，不適用任何table表格樣式進行標題（table的首行）的固定展示

效果圖： 1.table的格式 <div class='Table-Cont' id='Table-Cont'> <table class="table table-res

滾動條下拉時 table 的thead 固定在網頁固定在頂部不動

一、效果圖二、前端頁面核心程式碼： 1、固定頂部 position:fixed;top:0px2、左右滾動條 OVERFLOW-X: scroll;width:720px;3、時間內容越出單元格顯示 position: relative;bottom:30px;<

Excel2017如何同時凍結首行首列不滾動

ext png ffffff images 拆分處的 roc 步驟滾動工具 Excel 2017 方法步驟例如要凍結圖中表格的首行首列。先點擊選中圖中所示的左上角首行和首列交叉處的單元格。再點擊菜單欄中的“視圖”並點擊“凍結窗口”。點擊凍結窗口中的“凍結

HTML table表格td固定繼承寬度，過長換行顯示，不允許自動加長

table { border: #f2d69c 10px groove; width: 95%; padding: auto; margin-left: 2.5%; margin-right: 2.5%; } 設定成這樣如果資料很長的話，會突破9

Table實現表頭固定內容滾動

上下 -c div tab 兩個 pre htm table tr 100% <div style="width: 800px;"> <div class="table-head"> <table> &l

Bootstrap Table 定時重新整理固定滾動條的位置

場景：一張內容很大的表格，每隔一段時間重新整理資料，使用者看資料的時候突然重新整理了，由於重新整理後滾動條彈到頂部，這時客戶再找剛才看的內容，就比較困難了，如何解決了？思路：首先獲取滾動條的位置，然後定時向後臺請求資料的時候，把獲取的滾動條的位置設成滾動到的位置。主要程式碼： var

表格table的thead固定，tbody顯示滾動條，滾動條不佔位

在書寫專案的時候，當給tbody加滾動條時由於滾動條會佔位，總是出現表格邊框不對齊有錯位的效果呢，如下圖 <table class="table_cell">

滾動頁面時DIV到達頂部時固定在頂部(jq實現)

<body style="margin:0px;"> <div style="height:300px;background:#e0e0e0"></div> <div id="fixedMenu_ke

table裡表格固定大小並且內容自動換行

給table 加上 table-layout:fixed;word-break:break-all;word-wrap:break-word;border-collapse:collapse;margin:0;padding:0; css屬性，並且td和table的width都要指定，就能解決ie7，8，f

HTML+css+jQuery做的固定側欄和當滾動條滾動時頂部固定欄顯示/隱藏

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>fixed_test_zmjh</title> <link re

UIScrollView滾動時隱藏底部導航欄問題

art side silver iscroll trac import isp tom 底部導航 - (void)scrollViewDidScroll:(UIScrollView *)scrollView { NSLog(@"開始滾動"); int c

mybatis mapper xml文件配置resultmap時，id行和result行有什麽區別？

什麽 column invoice 配置 app nbsp ava customer entity mybatis mapper xml文件配置resultmap時，id行和result行有什麽區別？ <resultMap id = "CashInvoiceMap"

ScrollView 實現子視圖滑動到頂部時固定不動

test you () lap creat psi 的人 log 控件這個，個人建議使用自己寫的布局使用view的gon或者visble的方法，使用design包中的控件來的話，局限性很大方法有倆（1）自定義ScrollView 重寫ScrollView 的 comp

JavaSE7基礎定義二維數組固定的行、列數

pre png 運行二維數組代碼 args logs 精華 dem 版本參數：jdk-7u72-windows-i586註意事項：博文內容僅供參考，不可用於其他用途。代碼 class Demo{ public static void main(Stri

使用Spring4時，運行時出現找不到MappingJacksonHttpMessageConverter的情況

exception ade context dha log eating creating core 配置啟動項目報錯： [org.springframework.web.context.ContextLoader]Context initialization fail

jQuery網頁向下滾動導航固定頂部代碼

頂部 top div lin move c51 att eat oct <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>

基於jQuery實現頁面滾動時頂部導航顯示隱藏效果

center query styles 顯示 true function viewport top int <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=

scrapy1.4的csv輸出時出現空行問題的源碼修復-patch

scrapy1.4的csv輸出補丁修復 patch篇進入scrapy相關輸出csv的源碼路徑我的路徑為：D:\Python35\Lib\site-packages\scrapy編輯該路徑下的exporters.py文件，並修改的內容如下：class CsvItemExporter(BaseItemExport

table滾動時固定首行

相關推薦