純CSS實現表頭固定

純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>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</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;      }

<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <title>純CSS實現表頭固定 by 司徒正美</title><br /> <style type="text/css"></p><p> #scrollTable {<br /> width:701px;<br /> border: 1px solid #EB8;/*table沒有外圍的border，只有內部的td或th有border*/<br /> background: #FF8C00;<br /> }</p><p> #scrollTable table {<br /> border-collapse:collapse; /*統一設定兩個table為細線表格*/<br /> }</p><p> #scrollTable table.thead{ /*表頭*/<br /> /*div的第一個子項目*/<br /> width:100%;<br /> }</p><p> #scrollTable table.thead th{/*表頭*/<br /> border: 1px solid #EB8;<br /> border-right:#C96;<br /> color:#fff;<br /> background: #FF8C00;/*亮桔黃色*/<br /> }</p><p> #scrollTable div{/*能帶捲軸的表身*/<br /> /*div的第二個子項目*/<br /> width:100%;<br /> height:200px;<br /> overflow:auto;/*必需*/<br /> }</p><p> #scrollTable table.tbody{/*能帶捲軸的表身的正體*/<br /> width:100%;<br /> border: 1px solid #C96;<br /> border-right:#B74;<br /> color:#666666;<br /> background: #ECE9D8;<br /> }<br /> #scrollTable table.tbody td{/*能帶捲軸的表身的格子*/<br /> border:1px solid #C96;<br /> }</p><p> </style><br /> </head><br /> <body><br /> <div id="scrollTable"><br /> <table class="thead"></p><p> <tbody><br /> <tr><br /> <th>名稱</th><br /> <th>文法</th><br /> <th>說明</th><br /> <th>例子</th><br /> </tr><br /> </tbody><br /> </table><br /> <div><br /> <table class="tbody"></p><p> <tbody><br /> <tr><br /> <td>Simple attribute Selector</td><br /> <td>[attr] </td><br /> <td>選擇具有此屬性的元素</td><br /> <td>blockquote[title] { <br/>color: red }</td><br /> </tr><br /> <tr><br /> <td>attribute Value Selector</td><br /> <td>[attr="value"] </td><br /> <td>選出屬性值精確等於給出值的元素</td><br /> <td>h2[align="left"] { <br/>cursor: hand } </td><br /> </tr><br /> <tr><br /> <td>"Begins-with" attribute Value Selector</td><br /> <td>[attr^="value"] </td><br /> <td>選出屬性值以給出值開頭的元素</td><br /> <td>h2[align^="right"] { <br/>cursor: hand } </td><br /> </tr><br /> <tr><br /> <td>"Ends-with" attribute Value Selector</td><br /> <td>[attr$="value"] </td><br /> <td>選出屬性值以給出值結尾的元素</td><br /> <td>div[class$="vml"]{<br/>cursor: hand} </td><br /> </tr><br /> <tr><br /> <td>Substring-match attribute Value Selector</td><br /> <td>[attr*="value"] </td><br /> <td>選出屬性值包含給出值的元素</td><br /> <td>div[class*="grid"]{<br/> float:left} </td><br /> </tr><br /> <tr><br /> <td>One-Of-Many Attribute Value Selector</td><br /> <td>[attr~="value"] </td><br /> <td>原元素的屬性值為多個單詞，給出值為其中一個。</td><br /> <td>li[class~="last"]{<br/> padding-left:2em} </td><br /> </tr><br /> <tr><br /> <td>Hyphen Attribute Value Selector</td><br /> <td>[attr|="value"] </td><br /> <td>原元素的屬性值等於給出值，或者以給出值加“-”開頭</td><br /> <td>span[lang|="en"]{ <br/>color:green}</td><br /> </tr><br /> <tr><br /> <td>反選屬性值選取器</td><br /> <td>[attr!="value"] </td><br /> <td>非標準，jQuery中出現的</td><br /> <td>span[class!="red"]{<br/>color:green}</td><br /> </tr><br /> </tbody><br /> </table><br /> </div><br /> </div></p><p> </body><br /></html><br />

運行代碼

發現表頭的格子與表身的格子不對齊。這時我們需要動用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;      }

<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <title>純CSS實現表頭固定 by 司徒正美</title><br /> <style type="text/css"></p><p> #scrollTable {<br /> width:701px;<br /> border: 1px solid #EB8;/*table沒有外圍的border，只有內部的td或th有border*/<br /> background: #FF8C00;<br /> }</p><p> #scrollTable table {<br /> border-collapse:collapse; /*統一設定兩個table為細線表格*/<br /> }<br /> /*表頭 div的第一個子項目**/<br /> #scrollTable table.thead{<br /> width:100%;<br /> }<br /> /*表頭*/<br /> #scrollTable table.thead th{<br /> border: 1px solid #EB8;<br /> border-right:#C96;<br /> color:#fff;<br /> background: #FF8C00;/*亮桔黃色*/<br /> }<br /> /*能帶捲軸的表身*/<br /> /*div的第二個子項目*/<br /> #scrollTable div{<br /> width:100%;<br /> height:200px;<br /> overflow:auto;/*必需*/<br /> scrollbar-face-color:#EB8;/*那三個小矩形的背景色*/<br /> scrollbar-base-color:#ece9d8;/*那三個小矩形的前景色彩*/<br /> scrollbar-arrow-color:#FF8C00;/*上下按鈕裡三角箭頭的顏色*/<br /> scrollbar-track-color:#ece9d8;/*捲軸的那個活動塊所在的矩形的背景色*/<br /> scrollbar-highlight-color:#800040;/*那三個小矩形左上padding的顏色*/<br /> scrollbar-shadow-color:#800040;/*那三個小矩形右下padding的顏色*/<br /> scrollbar-3dlight-color: #EB8;/*那三個小矩形左上border的顏色*/<br /> scrollbar-darkshadow-Color:#EB8;/*那三個小矩形右下border的顏色*/<br /> }<br /> /*能帶捲軸的表身的正體*/<br /> #scrollTable table.tbody{<br /> width:100%;<br /> border: 1px solid #C96;<br /> border-right:#B74;<br /> color:#666666;<br /> background: #ECE9D8;<br /> }<br /> /*能帶捲軸的表身的格子*/<br /> #scrollTable table.tbody td{<br /> border:1px solid #C96;<br /> }</p><p> </style><br /> </head><br /> <body><br /> <div id="scrollTable"><br /> <table class="thead"><br /> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col><col></col><br /> <tbody><br /> <tr><br /> <th>名稱</th><br /> <th>文法</th><br /> <th>說明</th><br /> <th>例子</th><br /> </tr><br /> </tbody><br /> </table><br /> <div><br /> <table class="tbody"><br /> <col width="170px"></col> <col width="170px"></col> <col width="170px"></col><col></col><br /> <tbody><br /> <tr><br /> <td>Simple attribute Selector</td><br /> <td>[attr] </td><br /> <td>選擇具有此屬性的元素</td><br /> <td>blockquote[title] { <br/>color: red }</td><br /> </tr><br /> <tr><br /> <td>attribute Value Selector</td><br /> <td>[attr="value"] </td><br /> <td>選出屬性值精確等於給出值的元素</td><br /> <td>h2[align="left"] { <br/>cursor: hand } </td><br /> </tr><br /> <tr><br /> <td>"Begins-with" attribute Value Selector</td><br /> <td>[attr^="value"] </td><br /> <td>選出屬性值以給出值開頭的元素</td><br /> <td>h2[align^="right"] { <br/>cursor: hand } </td><br /> </tr><br /> <tr><br /> <td>"Ends-with" attribute Value Selector</td><br /> <td>[attr$="value"] </td><br /> <td>選出屬性值以給出值結尾的元素</td><br /> <td>div[class$="vml"]{<br/>cursor: hand} </td><br /> </tr><br /> <tr><br /> <td>Substring-match attribute Value Selector</td><br /> <td>[attr*="value"] </td><br /> <td>選出屬性值包含給出值的元素</td><br /> <td>div[class*="grid"]{<br/> float:left} </td><br /> </tr><br /> <tr><br /> <td>One-Of-Many Attribute Value Selector</td><br /> <td>[attr~="value"] </td><br /> <td>原元素的屬性值為多個單詞，給出值為其中一個。</td><br /> <td>li[class~="last"]{<br/> padding-left:2em} </td><br /> </tr><br /> <tr><br /> <td>Hyphen Attribute Value Selector</td><br /> <td>[attr|="value"] </td><br /> <td>原元素的屬性值等於給出值，或者以給出值加“-”開頭</td><br /> <td>span[lang|="en"]{ <br/>color:green}</td><br /> </tr><br /> <tr><br /> <td>反選屬性值選取器</td><br /> <td>[attr!="value"] </td><br /> <td>非標準，jQuery中出現的</td><br /> <td>span[class!="red"]{<br/>color:green}</td><br /> </tr><br /> </tbody><br /> </table><br /> </div><br /> </div></p><p> </body><br /></html><br />

運行代碼