搜尋
首頁web前端css教學純CSS如何實現表頭固定？表頭固定的實現

純CSS如何實現表頭固定？表頭固定的實現

青灯夜游
青灯夜游
Nov 10, 2018 pm 05:38 PM
css

本篇文章帶給大家的內容是介紹純CSS如何實現表頭固定？表頭固定的實作。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

純CSS實作表頭固定之所以難，主要在兩點：

1、佔有最大市佔率的IE6不支援position:fixed。

2、人們想破頭都想在一起表格中達到這種效果。

不過外國真的人用純CSS實現了這種效果，動用了數量驚人的CSS hacks……我覺得，如果搞到程式碼如此難懂且難擴展，還不如用javascript好了。碰巧今天我也遇到這種需求，換個視角想想，真的搞出來了。

我們知道，CSS是負責表現，HTML是負責結構，同樣的結構，換個樣式，給人的感覺完全不同，這也說明人的眼睛是很容易受騙。因此前些狂熱鼓吹p CSS的日子裡，人們總是想在頁面去掉table，用p span弄出了一個個「table」來。

雖然這種事是不可取，但也告訴我們，table做得的事，透過一些組合我們也能做出來。換個想法來說，既然一個table做不了，就兩個吧。

上面的table模擬表頭，下面的table模擬帶有捲軸的部分。在我們繼續講下去之前，我們先先明確一下我們的需求吧，要不太抽象了。首先是表格為4*9,每列寬170px,總為680px，滾動條在各瀏覽器預設為16px，別忘了，width是不包含border在內，四列就有5個縱向的border，寬總長為701px。 



  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
    
    
    
    
    
    
    
    
    




然後我們把這個table一分為二，第一個table為表頭，第二個table要帶滾動條，說明要在其父元素上應用overflow樣式，因此它要外套一個p。這個p與第一個table應該是等長的。 


不過不用花心思了，我們在它們的外面最套一個p，設定其width為701px，然後把這兩個子元素的寬都設為100%就行了。注意，我們在table中明確新增tbody以提高表格的渲染效率。 


<p>
  </p>


    
      
        
        
        
        
      
    
  
名称语法说明例子

  

    


      
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
        
          
          
          
          
        
      
    
Simple attribute Selector[attr] 选择具有此属性的元素blockquote[title] { 
color: red }
attribute Value Selector[attr="value"] 选出属性值精确等于给出值的元素h2[align="left"] { 
cursor: hand } 
"Begins-with" attribute Value Selector[attr^="value"] 选出属性值以给出值开头的元素h2[align^="right"] { 
cursor: hand } 
"Ends-with" attribute Value Selector[attr$="value"] 选出属性值以给出值结尾的元素p[class$="vml"]{
cursor: hand} 
Substring-match attribute Value Selector[attr*="value"] 选出属性值包含给出值的元素p[class*="grid"]{
 float:left} 
One-Of-Many Attribute Value Selector[attr~="value"] 原元素的属性值为多个单词，给出值为其中一个。li[class~="last"]{
 padding-left:2em} 
Hyphen Attribute Value Selector[attr|="value"] 原元素的属性值等于给出值，或者以给出值加“-”开头span[lang|="en"]{ 
color:green}
反选属性值选择器[attr!="value"] 非标准，jQuery中出现的span[class!="red"]{
color:green}

  

表現層部分：


#scrollTable {
  width:701px;
  border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
  background: #FF8C00;
}
 
 
#scrollTable table {
  border-collapse:collapse; /*统一设置两个table为细线表格*/
}
 
#scrollTable table.thead{ /*表头*/
  /*p的第一个子元素*/
  width:100%;
}
 
#scrollTable table.thead th{/*表头*/
  border: 1px solid #EB8;
  border-right:#C96;
  color:#fff;
  background: #FF8C00;/*亮桔黄色*/
}
 
#scrollTable p{/*能带滚动条的表身*/
  /*p的第二个子元素*/
  width:100%;
  height:200px;
  overflow:auto;/*必需*/
}
 
#scrollTable table.tbody{/*能带滚动条的表身的正体*/
  width:100%;
  border: 1px solid #C96;
  border-right:#B74;
  color:#666666;
  background: #ECE9D8;
}
#scrollTable table.tbody td{/*能带滚动条的表身的格子*/
  border:1px solid #C96;
}


執行程式碼：


nbsp;html>

  
    <meta>
    <title>纯CSS实现表头固定</title>
    <style>

      #scrollTable {
        width:701px;
        border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
        background: #FF8C00;
      }


      #scrollTable table {
        border-collapse:collapse; /*统一设置两个table为细线表格*/
      }

      #scrollTable table.thead{ /*表头*/
        /*p的第一个子元素*/
        width:100%;
      }

      #scrollTable table.thead th{/*表头*/
        border: 1px solid #EB8;
        border-right:#C96;
        color:#fff;
        background: #FF8C00;/*亮桔黄色*/
      }

      #scrollTable p{/*能带滚动条的表身*/
        /*p的第二个子元素*/
        width:100%;
        height:200px;
        overflow:auto;/*必需*/
      }

      #scrollTable table.tbody{/*能带滚动条的表身的正体*/
        width:100%;
        border: 1px solid #C96;
        border-right:#B74;
        color:#666666;
        background: #ECE9D8;
      }
      #scrollTable table.tbody td{/*能带滚动条的表身的格子*/
        border:1px solid #C96;
      }

    </style>
  
  
    <p>
      </p>


      
        
          
            
            
            
            
          
        
      
名称语法说明例子

      

        


       
          
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
          
        
Simple attribute Selector[attr] 选择具有此属性的元素blockquote[title] { 
color: red }
attribute Value Selector[attr="value"] 选出属性值精确等于给出值的元素h2[align="left"] { 
cursor: hand } 
"Begins-with" attribute Value Selector[attr^="value"] 选出属性值以给出值开头的元素h2[align^="right"] { 
cursor: hand } 
"Ends-with" attribute Value Selector[attr$="value"] 选出属性值以给出值结尾的元素p[class$="vml"]{
cursor: hand} 
Substring-match attribute Value Selector[attr*="value"] 选出属性值包含给出值的元素p[class*="grid"]{
 float:left} 
One-Of-Many Attribute Value Selector[attr~="value"] 原元素的属性值为多个单词，给出值为其中一个。li[class~="last"]{
 padding-left:2em} 
Hyphen Attribute Value Selector[attr|="value"] 原元素的属性值等于给出值，或者以给出值加“-”开头span[lang|="en"]{ 
color:green}
反选属性值选择器[attr!="value"] 非标准，jQuery中出现的span[class!="red"]{
color:green}

      
    


  



發現表頭的格子與表身的格子不對齊。這時我們需要動用col標籤，col允許我們統一設定tbody中索引值與它相同的td或th的背景色，文字對齊方式與寬度。雖然CSS2.1的相鄰選擇器與CSS3的子元素過濾偽類能讓我們用更精簡的方式設定它們，而且是樣式與結構分離那種，可惜IE家族總是拖後腿。我們再看一下它們的長度，由於最後一個表格有可能受滾動條擠壓而縮短長度，我們保證前三列長度相等就行了，剩餘的都分配給最後一個，換言之，最後一個不用設置。另，IE下可以設定捲軸的樣式，我們也把玩一翻吧。 




                  
//********************略*****************
        
 




 

      


                      
//********************略*****************    
          
      




 
表現層部分：


#scrollTable {
  width:701px;
  border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
  background: #FF8C00;
}
 
#scrollTable table {
  border-collapse:collapse; /*统一设置两个table为细线表格*/
}
/*表头 p的第一个子元素**/
#scrollTable table.thead{ 
  width:100%;
}
/*表头*/
#scrollTable table.thead th{
  border: 1px solid #EB8;
  border-right:#C96;
  color:#fff;
  background: #FF8C00;/*亮桔黄色*/
}
/*能带滚动条的表身*/
/*p的第二个子元素*/
#scrollTable p{
  width:100%;
  height:200px;
  overflow:auto;/*必需*/
  scrollbar-face-color:#EB8;/*那三个小矩形的背景色*/
  scrollbar-base-color:#ece9d8;/*那三个小矩形的前景色*/
  scrollbar-arrow-color:#FF8C00;/*上下按钮里三角箭头的颜色*/
  scrollbar-track-color:#ece9d8;/*滚动条的那个活动块所在的矩形的背景色*/
  scrollbar-highlight-color:#800040;/*那三个小矩形左上padding的颜色*/
  scrollbar-shadow-color:#800040;/*那三个小矩形右下padding的颜色*/
  scrollbar-3dlight-color: #EB8;/*那三个小矩形左上border的颜色*/
  scrollbar-darkshadow-Color:#EB8;/*那三个小矩形右下border的颜色*/
}
/*能带滚动条的表身的正体*/
#scrollTable table.tbody{
  width:100%;
  border: 1px solid #C96;
  border-right:#B74;
  color:#666666;
  background: #ECE9D8;
}
/*能带滚动条的表身的格子*/
#scrollTable table.tbody td{
  border:1px solid #C96;
}


運行程式碼：


nbsp;html>

  
    <meta>
    <title>纯CSS实现表头固定 </title>
    <style>

      #scrollTable {
        width:701px;
        border: 1px solid #EB8;/*table没有外围的border，只有内部的td或th有border*/
        background: #FF8C00;
      }

      #scrollTable table {
        border-collapse:collapse; /*统一设置两个table为细线表格*/
      }
      /*表头 p的第一个子元素**/
      #scrollTable table.thead{ 
        width:100%;
      }
      /*表头*/
      #scrollTable table.thead th{
        border: 1px solid #EB8;
        border-right:#C96;
        color:#fff;
        background: #FF8C00;/*亮桔黄色*/
      }
      /*能带滚动条的表身*/
      /*p的第二个子元素*/
      #scrollTable p{
        width:100%;
        height:200px;
        overflow:auto;/*必需*/
        scrollbar-face-color:#EB8;/*那三个小矩形的背景色*/
        scrollbar-base-color:#ece9d8;/*那三个小矩形的前景色*/
        scrollbar-arrow-color:#FF8C00;/*上下按钮里三角箭头的颜色*/
        scrollbar-track-color:#ece9d8;/*滚动条的那个活动块所在的矩形的背景色*/
        scrollbar-highlight-color:#800040;/*那三个小矩形左上padding的颜色*/
        scrollbar-shadow-color:#800040;/*那三个小矩形右下padding的颜色*/
        scrollbar-3dlight-color: #EB8;/*那三个小矩形左上border的颜色*/
        scrollbar-darkshadow-Color:#EB8;/*那三个小矩形右下border的颜色*/
      }
      /*能带滚动条的表身的正体*/
      #scrollTable table.tbody{
        width:100%;
        border: 1px solid #C96;
        border-right:#B74;
        color:#666666;
        background: #ECE9D8;
      }
      /*能带滚动条的表身的格子*/
      #scrollTable table.tbody td{
        border:1px solid #C96;
      }

    </style>
  
  
    <p>
      </p>


                  
          
            
            
            
            
          
        
      



名称语法说明例子

      

        


                      
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
            
              
              
              
              
            
          
        



Simple attribute Selector[attr] 选择具有此属性的元素blockquote[title] { 
color: red }
attribute Value Selector[attr="value"] 选出属性值精确等于给出值的元素h2[align="left"] { 
cursor: hand } 
"Begins-with" attribute Value Selector[attr^="value"] 选出属性值以给出值开头的元素h2[align^="right"] { 
cursor: hand } 
"Ends-with" attribute Value Selector[attr$="value"] 选出属性值以给出值结尾的元素p[class$="vml"]{
cursor: hand} 
Substring-match attribute Value Selector[attr*="value"] 选出属性值包含给出值的元素p[class*="grid"]{
 float:left} 
One-Of-Many Attribute Value Selector[attr~="value"] 原元素的属性值为多个单词，给出值为其中一个。li[class~="last"]{
 padding-left:2em} 
Hyphen Attribute Value Selector[attr|="value"] 原元素的属性值等于给出值，或者以给出值加“-”开头span[lang|="en"]{ 
color:green}
反选属性值选择器[attr!="value"] 非标准，jQuery中出现的span[class!="red"]{
color:green}

      
    

  

純CSS如何實現表頭固定？表頭固定的實現



以上是純CSS如何實現表頭固定？表頭固定的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述
本文轉載於：segmentfault 思否。如有侵權，請聯絡admin@php.cn刪除
相關文章
我們如何標記Google字體並創建Goofonts.com我們如何標記Google字體並創建Goofonts.comApr 12, 2025 pm	 12:02 PM
Goofonts是由開發人員和設計師丈夫簽名的附帶項目，它們都是版式的忠實擁護者。我們一直在標記Google
永恆的Web開發文章永恆的Web開發文章Apr 12, 2025 am	 11:44 AM
Pavithra Kodmad向人們詢問了他們認為是關於網絡開發的一些最永恆的文章的建議
與部分元素的交易與部分元素的交易Apr 12, 2025 am	 11:39 AM
同一天發表了兩篇文章：
使用JavaScript API練習GraphQl查詢使用JavaScript API練習GraphQl查詢Apr 12, 2025 am	 11:33 AM
學習如何構建GraphQL API可能具有挑戰性。但是您可以學習如何在10分鐘內使用GraphQL API！碰巧的是，我得到了完美的
組件級CMS組件級CMSApr 12, 2025 am	 11:09 AM
當一個組件生活在數據查詢居住在附近的數據查詢的環境中時，視覺組件和
將類型設置在圓上...帶偏移路徑將類型設置在圓上...帶偏移路徑Apr 12, 2025 am	 11:00 AM
這裡是Yuanchuan的一些合法CSS騙局。有此CSS屬性偏移路徑。曾幾何時，它被稱為Motion-Path，然後被更名。我
'恢復”在CSS中有什麼作用？'恢復”在CSS中有什麼作用？Apr 12, 2025 am	 10:59 AM
Miriam Suzanne在Mozilla開發人員的視頻中解釋了該主題。
現代戀人現代戀人Apr 12, 2025 am	 10:58 AM
我喜歡這樣的東西。
See all articles
熱AI工具
Undresser.AI Undress
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
Undress AI Tool
免費脫衣圖片
Clothoff.io
Clothoff.io
AI脫衣器
AI Hentai Generator
AI Hentai Generator
免費產生 AI 無盡。
顯示更多
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
2 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌
顯示更多
熱工具
Atom編輯器mac版下載
Atom編輯器mac版下載
最受歡迎的的開源編輯器
ZendStudio 13.5.1 Mac
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
DVWA
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
WebStorm Mac版
WebStorm Mac版
好用的JavaScript開發工具
Safe Exam Browser
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
顯示更多
熱門話題
gmail信箱登陸入口在哪裡
7469
15
CakePHP 教程
1376
52
steam的賬戶名稱是什麼格式
77
11
win11激活密鑰永久
48
19
NYT連接提示和答案
19
29
顯示更多