純CSS實現(xiàn)表頭固定的方法是什么？這個問題可能是我們日常學習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純热?，讓我們一起來看看吧?/p>
成都創(chuàng)新互聯(lián)公司服務項目包括黃山網(wǎng)站建設、黃山網(wǎng)站制作、黃山網(wǎng)頁制作以及黃山網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網(wǎng)行業(yè)的解決方案，黃山網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到黃山省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！
純CSS實現(xiàn)表頭固定之所以難，主要在兩點：
1、占有最大市場份額的IE6不支持position:fixed。
2、人們想破頭都想在一起表格中實現(xiàn)這種效果。
不過外國真的人用純CSS實現(xiàn)了這種效果，動用了數(shù)量驚人的CSS hacks……我覺得，如果搞到代碼如此難懂且難擴展，還不如用javascript好了。碰巧今天我也遇到這種需求，換個視角想想，真的搞出來了。
我們知道，CSS是負責表現(xiàn)，HTML是負責結構，同樣的結構，換個樣式，給人的感覺完全不同，這也說明人的眼睛是很容易受騙。因此前些狂熱鼓吹p+CSS的日子里，人們總是想在頁面去掉table，用p+span弄出了一個個“table”來。
雖然這種事是不可取，但也告訴我們，table做得的事，通過一些組合我們也能做出來。換個思路來說，既然一個table做不了，就兩個吧。
上面的table模擬表頭，下面的table模擬帶滾動條的部分。在我們繼續(xù)講下去之前，我們先明確一下我們的需求吧，要不太抽象了。首先是表格為4*9,每列寬170px,總為680px，滾動條在各瀏覽器默認為16px，別忘了，width是不包含border在內，四列就有5個縱向的border，寬總長為701px。
然后我們把這個table一分為二，第一個table為表頭，第二個table要帶滾動條，說明要在其父元素上應用overflow樣式，因此它要外套一個p。這個p與第一個table應該是等長的。
不過不用花心思了，我們在它們的外面最套一個p，設置其width為701px，然后把這兩個子元素的寬都設為100%就行了。注意，我們在table中顯式添加tbody以提高表格的渲染效率。
| 名稱 | 語法 | 說明 | 例子 |
|---|
| Simple attribute Selector | [attr] | 選擇具有此屬性的元素 | blockquote[title] { color: red } |
| attribute Value Selector | [attr="value"] | 選出屬性值精確等于給出值的元素 | h3[align="left"] { cursor: hand } |
| "Begins-with" attribute Value Selector | [attr^="value"] | 選出屬性值以給出值開頭的元素 | h3[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中出現(xiàn)的 | span[class!="red"]{ color:green} |
表現(xiàn)層部分：
重慶分公司
重慶分公司
#scrollTable {
width:701px;
border: 1px solid #EB8;/*table沒有外圍的border，只有內部的td或th有border*/
background: #FF8C00;
}
#scrollTable table {
border-collapse:collapse; /*統(tǒng)一設置兩個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;
}運行代碼：
純CSS實現(xiàn)表頭固定
| 名稱 | 語法 | 說明 | 例子 |
|---|
| Simple attribute Selector | [attr] | 選擇具有此屬性的元素 | blockquote[title] { color: red } |
| attribute Value Selector | [attr="value"] | 選出屬性值精確等于給出值的元素 | h3[align="left"] { cursor: hand } |
| "Begins-with" attribute Value Selector | [attr^="value"] | 選出屬性值以給出值開頭的元素 | h3[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中出現(xiàn)的 | span[class!="red"]{ color:green} |
發(fā)現(xiàn)表頭的格子與表身的格子不對齊。這時我們需要動用col標簽，col允許我們統(tǒng)一設置tbody中索引值與它相同的td或th的背景色，文字對齊方式與寬度。雖然CSS2.1的相鄰選擇器與CSS3的子元素過濾偽類能讓我們用更精簡的方式設置它們，而且是樣式與結構分離那種，可惜IE家族總是拖后腿。我們再看一下它們的長度，由于最后一個表格有可能受滾動條擠壓而縮短長度，我們保證前三列長度相等就行了，剩余的都分配給最后一個，換言之，最后一個不用設置。另，IE下可以設置滾動條的樣式，我們也把玩一翻吧。
表現(xiàn)層部分：
#scrollTable {
width:701px;
border: 1px solid #EB8;/*table沒有外圍的border，只有內部的td或th有border*/
background: #FF8C00;
}
#scrollTable table {
border-collapse:collapse; /*統(tǒng)一設置兩個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;
}運行代碼：
純CSS實現(xiàn)表頭固定
| 名稱 | 語法 | 說明 | 例子 |
|---|
| Simple attribute Selector | [attr] | 選擇具有此屬性的元素 | blockquote[title] { color: red } |
| attribute Value Selector | [attr="value"] | 選出屬性值精確等于給出值的元素 | h3[align="left"] { cursor: hand } |
| "Begins-with" attribute Value Selector | [attr^="value"] | 選出屬性值以給出值開頭的元素 | h3[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中出現(xiàn)的 | span[class!="red"]{ color:green} |
感謝各位的閱讀！看完上述內容，你們對純CSS實現(xiàn)表頭固定的方法是什么大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
