純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以提高表格的渲染效率。
新聞熱點
疑難解答
