純CSS實現表頭固定之所以難，主要在兩點。一是占有最大市場份額的IE6不支持position:fixed。另一個，是人們想破頭都想在一起表格中實現這種效果。不過外國真的人用純CSS實現了這種效果，動用了數量驚人的CSS hacks……我覺得，如果搞到代碼如此難懂且難擴展，還不如用javascript好了。碰巧今天我也遇到這種需求，換個視角想想，真的搞出來了。
我們知道，CSS是負責表現，HTML是負責結構，同樣的結構，換個樣式，給人的感覺完全不同，這也說明人的眼睛是很容易受騙。因此前些狂熱鼓吹DIV+CSS的日子里，人們總是想在頁面去掉table，用div+span弄出了一個個“table”來。雖然這種事是不可取，但也告訴我們，table做得的事，通過一些組合我們也能做出來。換個思路來說，既然一個table做不了，就兩個吧。上面的table模擬表頭，下面的table模擬帶滾動條的部分。在我們繼續講下去之前，我們先明確一下我們的需求吧，要不太抽象了。首先是表格為4*9,每列寬170px,總為680px，滾動條在各瀏覽器默認為16px，別忘了，width是不包含border在內，四列就有5個縱向的border，寬總長為701px。
<table > <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr></table>
然后我們把這個table一分為二，第一個table為表頭，第二個table要帶滾動條，說明要在其父元素上應用overflow樣式，因此它要外套一個div。這個div與第一個table應該是等長的。不過不用花心思了，我們在它們的外面最套一個div，設置其width為701px，然后把這兩個子元素的寬都設為100%就行了。注意，我們在table中顯式添加tbody以提高表格的渲染效率。
<div id="scrollTable"> <table class="thead"> <tbody> <tr> <th>名稱</th> <th>語法</th> <th>說明</th> <th>例子</th> </tr> </tbody> </table> <div> <table class="tbody"> <tbody> <tr> <td>Simple attribute Selector</td> <td>[attr] </td> <td>選擇具有此屬性的元素</td> <td>blockquote[title] { <br/>color: red }</td> </tr> <tr> <td>attribute Value Selector</td> <td>[attr="value"] </td> <td>選出屬性值精確等于給出值的元素</td> <td>h2[align="left"] { <br/>cursor: hand } </td> </tr> <tr> <td>"Begins-with" attribute Value Selector</td> <td>[attr^="value"] </td> <td>選出屬性值以給出值開頭的元素</td> <td>h2[align^="right"] { <br/>cursor: hand } </td> </tr> <tr> <td>"Ends-with" attribute Value Selector</td> <td>[attr$="value"] </td> <td>選出屬性值以給出值結尾的元素</td> <td>div[class$="vml"]{<br/>cursor: hand} </td> </tr> <tr> <td>Substring-match attribute Value Selector</td> <td>[attr*="value"] </td> <td>選出屬性值包含給出值的元素</td> <td>div[class*="grid"]{<br/> float:left} </td> </tr> <tr> <td>One-Of-Many Attribute Value Selector</td> <td>[attr~="value"] </td> <td>原元素的屬性值為多個單詞，給出值為其中一個。</td> <td>li[class~="last"]{<br/> padding-left:2em} </td> </tr> <tr> <td>Hyphen Attribute Value Selector</td> <td>[attr|="value"] </td> <td>原元素的屬性值等于給出值，或者以給出值加“-”開頭</td> <td>span[lang|="en"]{ <br/>color:green}</td> </tr> <tr> <td>反選屬性值選擇器</td> <td>[attr!="value"] </td> <td>非標準，jQuery中出現的</td> <td>span[class!="red"]{<br/>color:green}</td> </tr> </tbody> </table> </div></div>表現層部分：
#scrollTable { width:701px; border: 1px solid #EB8;/*table沒有外圍的border，只有內部的td或th有border*/ background: #FF8C00;} #scrollTable table { border-collapse:collapse; /*統一設置兩個table為細線表格*/} #scrollTable table.thead{ /*表頭*/ /*div的第一個子元素*/ width:100%;} #scrollTable table.thead th{/*表頭*/ border: 1px solid #EB8; border-right:#C96; color:#fff; background: #FF8C00;/*亮桔黃色*/} #scrollTable div{/*能帶滾動條的表身*/ /*div的第二個子元素*/ 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;}運行代碼：
<!doctype html><html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <title>純CSS實現表頭固定</title> <style type="text/css"> #scrollTable { width:701px; border: 1px solid #EB8;/*table沒有外圍的border，只有內部的td或th有border*/ background: #FF8C00; } #scrollTable table { border-collapse:collapse; /*統一設置兩個table為細線表格*/ } #scrollTable table.thead{ /*表頭*/ /*div的第一個子元素*/ width:100%; } #scrollTable table.thead th{/*表頭*/ border: 1px solid #EB8; border-right:#C96; color:#fff; background: #FF8C00;/*亮桔黃色*/ } #scrollTable div{/*能帶滾動條的表身*/ /*div的第二個子元素*/ 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> </head> <body> <div id="scrollTable"> <table class="thead"> <tbody> <tr> <th>名稱</th> <th>語法</th> <th>說明</th> <th>例子</th> </tr> </tbody> </table> <div> <table class="tbody"> <tbody> <tr> <td>Simple attribute Selector</td> <td>[attr] </td> <td>選擇具有此屬性的元素</td> <td>blockquote[title] { <br/>color: red }</td> </tr> <tr> <td>attribute Value Selector</td> <td>[attr="value"] </td> <td>選出屬性值精確等于給出值的元素</td> <td>h2[align="left"] { <br/>cursor: hand } </td> </tr> <tr> <td>"Begins-with" attribute Value Selector</td> <td>[attr^="value"] </td> <td>選出屬性值以給出值開頭的元素</td> <td>h2[align^="right"] { <br/>cursor: hand } </td> </tr> <tr> <td>"Ends-with" attribute Value Selector</td> <td>[attr$="value"] </td> <td>選出屬性值以給出值結尾的元素</td> <td>div[class$="vml"]{<br/>cursor: hand} </td> </tr> <tr> <td>Substring-match attribute Value Selector</td> <td>[attr*="value"] </td> <td>選出屬性值包含給出值的元素</td> <td>div[class*="grid"]{<br/> float:left} </td> </tr> <tr> <td>One-Of-Many Attribute Value Selector</td> <td>[attr~="value"] </td> <td>原元素的屬性值為多個單詞，給出值為其中一個。</td> <td>li[class~="last"]{<br/> padding-left:2em} </td> </tr> <tr> <td>Hyphen Attribute Value Selector</td> <td>[attr|="value"] </td> <td>原元素的屬性值等于給出值，或者以給出值加“-”開頭</td> <td>span[lang|="en"]{ <br/>color:green}</td> </tr> <tr> <td>反選屬性值選擇器</td> <td>[attr!="value"] </td> <td>非標準，jQuery中出現的</td> <td>span[class!="red"]{<br/>color:green}</td> </tr> </tbody> </table> </div> </div> </body></html>
發現表頭的格子與表身的格子不對齊。這時我們需要動用col標簽，col允許我們統一設置tbody中索引值與它相同的td或th的背景色，文字對齊方式與寬度。雖然CSS2.1的相鄰選擇器與CSS3的子元素過濾偽類能讓我們用更精簡的方式設置它們，而且是樣式與結構分離那種，可惜IE家族總是拖后腿。我們再看一下它們的長度，由于最后一個表格有可能受滾動條擠壓而縮短長度，我們保證前三列長度相等就行了，剩余的都分配給最后一個，換言之，最后一個不用設置。另，IE下可以設置滾動條的樣式，我們也把玩一翻吧。
<table class="thead"> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col><col></col> <tbody>//********************略***************** </tbody> </table> <div> <table class="tbody"> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col><col></col> <tbody>//********************略***************** </tbody> </table> </div>
表現層部分：
#scrollTable { width:701px; border: 1px solid #EB8;/*table沒有外圍的border，只有內部的td或th有border*/ background: #FF8C00;} #scrollTable table { border-collapse:collapse; /*統一設置兩個table為細線表格*/}/*表頭 div的第一個子元素**/#scrollTable table.thead{ width:100%;}/*表頭*/#scrollTable table.thead th{ border: 1px solid #EB8; border-right:#C96; color:#fff; background: #FF8C00;/*亮桔黃色*/}/*能帶滾動條的表身*//*div的第二個子元素*/#scrollTable div{ 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;}運行代碼：
<!doctype html><html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <title>純CSS實現表頭固定 </title> <style type="text/css"> #scrollTable { width:701px; border: 1px solid #EB8;/*table沒有外圍的border，只有內部的td或th有border*/ background: #FF8C00; } #scrollTable table { border-collapse:collapse; /*統一設置兩個table為細線表格*/ } /*表頭 div的第一個子元素**/ #scrollTable table.thead{ width:100%; } /*表頭*/ #scrollTable table.thead th{ border: 1px solid #EB8; border-right:#C96; color:#fff; background: #FF8C00;/*亮桔黃色*/ } /*能帶滾動條的表身*/ /*div的第二個子元素*/ #scrollTable div{ 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> </head> <body> <div id="scrollTable"> <table class="thead"> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col><col></col> <tbody> <tr> <th>名稱</th> <th>語法</th> <th>說明</th> <th>例子</th> </tr> </tbody> </table> <div> <table class="tbody"> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col><col></col> <tbody> <tr> <td>Simple attribute Selector</td> <td>[attr] </td> <td>選擇具有此屬性的元素</td> <td>blockquote[title] { <br/>color: red }</td> </tr> <tr> <td>attribute Value Selector</td> <td>[attr="value"] </td> <td>選出屬性值精確等于給出值的元素</td> <td>h2[align="left"] { <br/>cursor: hand } </td> </tr> <tr> <td>"Begins-with" attribute Value Selector</td> <td>[attr^="value"] </td> <td>選出屬性值以給出值開頭的元素</td> <td>h2[align^="right"] { <br/>cursor: hand } </td> </tr> <tr> <td>"Ends-with" attribute Value Selector</td> <td>[attr$="value"] </td> <td>選出屬性值以給出值結尾的元素</td> <td>div[class$="vml"]{<br/>cursor: hand} </td> </tr> <tr> <td>Substring-match attribute Value Selector</td> <td>[attr*="value"] </td> <td>選出屬性值包含給出值的元素</td> <td>div[class*="grid"]{<br/> float:left} </td> </tr> <tr> <td>One-Of-Many Attribute Value Selector</td> <td>[attr~="value"] </td> <td>原元素的屬性值為多個單詞，給出值為其中一個。</td> <td>li[class~="last"]{<br/> padding-left:2em} </td> </tr> <tr> <td>Hyphen Attribute Value Selector</td> <td>[attr|="value"] </td> <td>原元素的屬性值等于給出值，或者以給出值加“-”開頭</td> <td>span[lang|="en"]{ <br/>color:green}</td> </tr> <tr> <td>反選屬性值選擇器</td> <td>[attr!="value"] </td> <td>非標準，jQuery中出現的</td> <td>span[class!="red"]{<br/>color:green}</td> </tr> </tbody> </table> </div> </div> </body></html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
