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