您現在的位置是:電腦技術吧?>? 編程技術 ??>??css表頭固定,css固定表格表頭??>??正文詳情

css表頭固定,css固定表格表頭

庾霞英2019-11-17 10:30:35 人圍觀
簡介js表頭固定當position屬性固定時,元素的位置將不受滾動條的影響,而是直接根據窗口定位。這是修復頭的最直接的方法。互聯網上的其他方式就像是繞道而行。但同時,必須解決兩js表

position屬性取值為fixed時,則元素的位置將不受滾動條的影響,而是直接依據窗口定位,這就是將表頭固定的最直接方法,網上其他途徑感覺都是在走彎路。

但是與此同時必須解決兩個問題。

第一:表體將隨之不依據表頭定位,而是依據body元素定位,因此表體將上移,導致表體靠上部分被表頭遮擋,而且有重影。

第二:表體的寬高和表頭的寬高也將互相獨立不再受文檔流的約束,這導致單元格對不齊。

解決辦法示例如下。

其中,單元格上下對齊的問題可以通過設置padding margin 百分比width來解決,表頭和表體也可以放在各自的div里。

樣式單代碼如下:style type=text/css *{ padding:0px; margin: 0px; } #thead { /*固定表頭*/ position:fixed; /* 表頭顯示層次高于表體,防止空白行和表頭重合時出現重影*/ z-index:2; background:#ECECFF; } #spacetr{ /* 空白的tr 用來填補表頭遮蓋的數據*/ position:relative; z-index:1; } .tdata { /* 顯示表格數據的tr */ position:relative; z-index:1; } /style js腳本代碼如下:$(function(){ $(#spacetr).css(height,$(#thead).css(height)); //將空白行的高度設置為和表頭等高,使被遮擋的數據剛好下移表頭高度的距離 }); jsp代碼:代碼如下:div style=width:100% %--img src=${pageContext.request.contextPath}/images/post_head.jpg/ --% table id=table border=1px gray solid cellspacing=0 cellpadding=0 width=100%; tr id=thead td width=9% align=center招聘學科/td c:forEach items=${postnames} var=postname td valign=bottom align=center ${postname} /td /c:forEach /tr tr id=spacetr td width=9%/td c:forEach items=${postnames} var=postname td /td /c:forEach /tr c:forEach items=${shcoolsPostnumbers} var=schoolPostnumbers tr class=tdata td width=9% ${schoolPostnumbers.key}/td c:forEach items=${schoolPostnumbers.value} var=postnumber td align=center ${postnumber} /td /c:forEach /tr /c:forEach /table /div

版權聲明:本文由 庾霞英 整理編輯。

原標題:css table固定表頭,css表頭不動

轉載注明出處:http://www.dn9ww09s.icu/program/13137.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 手機版美圖秀秀一寸,手機怎么裁剪一寸照片

    手機版美圖秀秀一寸,手機怎么裁剪一寸照片 相關圖片電腦一寸照片怎么制作我們在日常生活中經常使用一寸照片。當我們用完一寸照片時,我們沒有一寸照片的電子文件,所以我們必須再去照相館,這特別麻煩。我們能自己拍一寸照片嗎...

  • 照片切換特效軟件,特效

    照片切換特效軟件,特效 相關圖片pr照片切換特效我們先來看看效果:打開flash創建一個新層,用line工具畫一條垂直線,放在舞臺左側,然后在第30幀插入關鍵幀。圖1步驟2。單擊第30幀將垂直線拉到stageflash制作遮罩層...

  • office激活密鑰在哪,office密鑰

    office激活密鑰在哪,office密鑰 相關圖片怎么激活officeOffice系列軟件從早期就開始使用激活模式。沒有激活密鑰,其所有功能就無法順利使用。Office 2010版本也不例外。小編分享了一些2010年的辦公鑰匙,希office激活碼和密鑰...

  • ps中如何畫虛線方框,ps怎么畫矩形虛線

    ps中如何畫虛線方框,ps怎么畫矩形虛線 相關圖片pr創建的矩形怎么變成虛線我相信很多用PS的搭檔都不知道怎么畫虛線框?如何畫虛線框?然后,通過本教程,跟隨超人軟件編輯器了解它,希望能幫助你如何繪制PS虛線框?ps怎么畫方塊...

  • 怎么提升用戶粘性,為了提升用戶粘性還是黏性

    怎么提升用戶粘性,為了提升用戶粘性還是黏性 相關圖片用戶粘性問題怎么解決如何提高用戶的粘性?今天阿里金生翻譯的好文章從心理學、用戶行為習慣、鉤子模型、觸發器、動機等方面進行了科學專業的分析,文章流暢自由,循序漸進,...

  • 微信怎么查找添加好友記錄,微信添加好友記錄查找

    微信怎么查找添加好友記錄,微信添加好友記錄查找 相關圖片qq添加好友記錄當我們在百度上尋找百度云資源時,我們經常會有一個小伙伴留言,百度云加上一個朋友,然后私自發一個鏈接。資源擺在我們面前。因此,我們不知道如何在百度云上添...

  • minidump是什么,minidump是什么意思

    minidump是什么,minidump是什么意思 相關圖片win7 minidump 藍屏最近,許多合作伙伴報告說,他們在打開電腦后出現了藍屏問題。經過分析,發現找不到minidump.dmp文件。什么是minidump.dmp?沒有minidump藍屏找不到minidump文件夾...

  • windows安全中心怎么關閉,windows10關閉自動更新

    windows安全中心怎么關閉,windows10關閉自動更新 相關圖片w10安全中心怎么關閉如何關閉Windows10操作中心中的設置教程:1。在Windows 10 Cortana搜索字段中輸入regedit,然后輸入注冊表編輯器2。找到海基了嗎?現w10安全中心關閉不了...

  • 臺式無法識別usb設備win10,w10電腦無法識別usb設備手機

    臺式無法識別usb設備win10,w10電腦無法識別usb設備手機 相關圖片win10突然無法識別鼠標我確信每個win10用戶都遇到過這樣的情況:當USB設備插入計算機時,無法識別它。那么win10無法識別USB設備呢?我不需要說太多。接下來,我將跟隨超人軟件win10無法...

  • 網頁版式設計分析,頁面版式設計

    網頁版式設計分析,頁面版式設計 相關圖片排版設計教程網頁版式設計的選擇網站的版式設計...

熱評文章

  • 沖頂大會,沖頂大會現在還有嗎

    沖頂大會,沖頂大會現在還有嗎 相關圖片沖頂大會為何取消了直播答疑軟件可以說是最近最流行的軟件,其中峰會復活卡更受歡迎。你知道怎么拿到山頂復活卡嗎?山頂復活卡有什么用?現在,超人軟件編輯將向您介紹它。為...

  • 檢查插件,如何檢查手機有無插件

    檢查插件,如何檢查手機有無插件 相關圖片檢測網址插件在Dreamweaver中使用check插件行為可以將指定的插件帶到不同的頁面,具體取決于用戶的瀏覽器是否安裝了它們。例如,您可能希望安裝了flash的用戶轉到防越獄檢測插件...

  • 簡單搜索沖頂神器 問答,簡單搜索沖頂神器 新浪

    簡單搜索沖頂神器 問答,簡單搜索沖頂神器 新浪 相關圖片使用簡單搜索近日,由于王思聰的支持,峰會在朋友圈爆發。崇定會議是一款益智游戲應用程序。你只要互動地回答問題就可以贏得現金獎。模型很簡單,在線版的快樂字典,直播版的...

  • 網頁錯位,網頁內容錯位

    網頁錯位,網頁內容錯位 相關圖片電腦網頁錯位怎么解決如果你網站的某個頁面有時打開錯誤,但當你再次刷新時它可以正常顯示,這種情況主要是由div CSS制作的網站,現在也很流行。在過去,對于具有表結構的網頁,...

  • win7沒有端口,win7端口

    win7沒有端口,win7端口 相關圖片windows如何打開端口在計算機系統中,一些不常使用的端口很容易成為黑客攻擊的目標。此時,用戶可以通過關閉這些危險端口,有效減少病毒入侵。那么win7怎么能一鍵關閉危險端口呢?...

  • xls文件格式和擴展名不匹配,電腦怎么打開xlsx文件

    xls文件格式和擴展名不匹配,電腦怎么打開xlsx文件 相關圖片xlxs文件打開一片空白過去Excel的默認保存格式是XLS,但在Excel 2003之后,主要是xlsx后綴如果xlsx文件不能打開呢?如何打開xlsx文件?現在,超人軟件編輯將介紹電腦上表格文件打不開...

  • html5響應式布局,html響應式布局代碼

    html5響應式布局,html響應式布局代碼 相關圖片jquery響應式布局什么是反應式布局?反應式布局是伊桑·馬科特于2010年5月提出的一個概念。簡而言之,一個網站可以兼容多個終端,而不是為每個終端制作一個特定的版本。這個概念的...

  • genymotion怎么使用,genymotion破解版

    genymotion怎么使用,genymotion破解版 相關圖片genymotion破解版網盤資源Genymotion是一個Android模擬器,它允許用戶在計算機上運行Android系統。有些游戲可以擺脫手機電源的束縛,毫無顧忌地在電腦上運行。讓我們看看如安卓模擬器gen...

  • 跳轉菜單,自定義菜單跳轉網頁

    跳轉菜單,自定義菜單跳轉網頁 相關圖片訂閱號菜單跳轉到網頁一。在Dreamweaver 1中插入跳轉菜單。單擊鼠標,將光標定位在表單框中,單擊“插入”菜單,選擇表單項,在彈出的子菜單中選擇“跳轉菜單”命令,或在“插入”...

  • 芝麻信用怎么開通,芝麻信用

    芝麻信用怎么開通,芝麻信用 相關圖片芝麻信用分在哪里查看Pulse作為一種能夠擴展網絡的軟件,相信有很多小伙伴通過它來結識一些客戶和朋友。那么pulse怎么能綁定芝麻信用呢?脈沖綁定芝麻信用卡有什么用?我不怎么說...

關注微信

变脸官网查询