之前在做一個項目的時候，需要用到表格顯示一個月中每天的相關信息記錄（一天的信息記錄顯示為一行）。於是有了這樣一個問題，一次性將數據全部顯示出來，頁面就會出現滾動條，這樣的話就不能同時看到表頭信息和表格底部的數據記錄，把每個月的信息記錄都分為兩頁顯示的話，又麻煩（切換月份后還要在進行分頁操作）。把情況跟領導描述了下，表示不知道怎么做好了，領導略微想了下說，“把表頭固定不就行了”。
好吧，固定表頭，我只在Excel中操作過，在頁面上要把table表頭固定，對於我這樣的菜鳥來說，簡直就是“蜀道難，難於上青天”啊。幸虧有“萬能”的度娘啊，還真給我百度到了幾個例子，由於但是急於完成那個效果，沒有記下我采用的那篇博文的地址和博主。這段時間沒什么事兒，回頭把項目中固定table表頭的實現代碼重新整理了下，記錄下來方便以后回顧。
當時從百度出來的范例中選了各種實現方法來嘗試，感覺這兩個種方法比較容易理解，實現的思想也差不多，只是代碼的組織上不同而已，今天就把這兩種實現方法都貼出來對比一下。
實現方法一：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> 固定表格表頭 </title> 5 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 6 <meta name="Generator" content="EditPlus"> 7 <meta name="Author" content=""> 8 <meta name="Keywords" content=""> 9 <meta name="Description" content=""> 10 <style type="text/css"> 11 div{ 12 overflow-y: scroll; 13 overflow-x: hidden; 14 height: 100px; 15 margin-top: 5px; 16 margin-left: 12px; 17 padding-top: -2px; 18 padding-bottom: 5px; 19 border: 3px solid #009933; 20 } 21 table{ 22 width: 100%; 23 border-color: #d2f1ac; 24 border-collapse: collapse; 25 border-top: 0px solid #ffffff; 26 } 27 .fixedtd{ 28 position: relative; 29 z-index: 1; 30 background: #009933; 31 text-align: center; 32 } 33 </style> 34 </head> 35 36 <body> 37 <div> 38 <table border="1"> 39 <tr> 40 <td class="fixedtd"> 41 固定表頭第一列 42 </td> 43 <td class="fixedtd"> 44 固定表頭第二列 45 </td> 46 <td class="fixedtd"> 47 固定表頭第三列 48 </td> 49 <td class="fixedtd"> 50 固定表頭第四列 51 </td> 52 <td class="fixedtd"> 53 固定表頭第五列 54 </td> 55 <td class="fixedtd"> 56 固定表頭第六列 57 </td> 58 </tr> 59 <tr> 60 <td>A1</td> 61 <td>A2</td> 62 <td>A3</td> 63 <td>A4</td> 64 <td>A5</td> 65 <td>A6</td> 66 </tr> 67 <tr> 68 <td>B1</td> 69 <td>B2</td> 70 <td>B3</td> 71 <td>B4</td> 72 <td>B5</td> 73 <td>B6</td> 74 </tr> 75 <tr> 76 <td>C1</td> 77 <td>C2</td> 78 <td>C3</td> 79 <td>C4</td> 80 <td>C5</td> 81 <td>C6</td> 82 </tr> 83 <tr> 84 <td>D1</td> 85 <td>D2</td> 86 <td>D3</td> 87 <td>D4</td> 88 <td>D5</td> 89 <td>D6</td> 90 </tr> 91 <tr> 92 <td>E1</td> 93 <td>E2</td> 94 <td>E3</td> 95 <td>E4</td> 96 <td>E5</td> 97 <td>E6</td> 98 </tr> 99 <tr> 100 <td>F1</td> 101 <td>F2</td> 102 <td>F3</td> 103 <td>F4</td> 104 <td>F5</td> 105 <td>F6</td> 106 </tr> 107 <tr> 108 <td>G1</td> 109 <td>G2</td> 110 <td>G3</td> 111 <td>G4</td> 112 <td>G5</td> 113 <td>G6</td> 114 </tr> 115 <tr> 116 <td>H1</td> 117 <td>H2</td> 118 <td>H3</td> 119 <td>H4</td> 120 <td>H5</td> 121 <td>H6</td> 122 </tr> 123 </table> 124 </div> 125 </body> 126 </html>
運行效果如下圖所示：
該實現方法的一個不足之處在於：表頭行與下面可滾動的行的寬度相同，div的滾動條顯示在表頭行的下方，覆蓋了可滾動的行中最后一列的部分寬度，如果將div的橫向滾動條也顯示出來的話，那么不管怎樣設置table和div的寬度，都不能使橫向的滾動條消失（如果表格數據行的高度和小於div的高度值時，縱向的滾動條會消失）。
實現方法二：
1 <html> 2 <head> 3 <title>CSS控制表格表頭固定</title> 4 <style type="text/css"> 5 div.tableContainer { 6 clear: both; 7 border-collapse: collapse; 8 border: 2px solid #009933; 9 height: expression(document.body.clientHeight*0.3); 10 overflow: auto; 11 width: 1024px; 12 } 13 14 div.tableContainer table { 15 float: left; 16 width: 100%; 17 border-collapse: collapse; 18 empty-cells: hide; 19 } 20 21 thead.fixedHeader tr { 22 position: relative; 23 top: expression(document.getElementById("tableContainer").scrollTop); 24 } 25 26 thead.fixedHeader th { 27 background: #009933; 28 border-left: 1px solid #d2f1ac; 29 border-right: 1px solid #d2f1ac; 30 border-top: 1px solid #d2f1ac; 31 border-bottom: 1px solid #d2f1ac; 32 font-weight: normal; 33 padding: 4px 3px; 34 text-align: center; 35 } 36 37 tbody.scrollContent td, tbody.scrollContent tr td { 38 border-bottom: 1px solid #d2f1ac; 39 border-left: 1px solid #d2f1ac; 40 border-right: 1px solid #d2f1ac; 41 border-top: 1px solid #d2f1ac; 42 padding: 2px 3px; 43 } 44 </style> 45 </head> 46 47 <body> 48 <div id="tableContainer" class="tableContainer"> 49 <table> 50 <thead class="fixedHeader"> 51 <tr> 52 <th colspan="5">測試效果</th> 53 </tr> 54 <tr> 55 <th>表頭第一列</th> 56 <th>表頭第二列</th> 57 <th>表頭第三列</th> 58 <th>表頭第四列</th> 59 <th>表頭第五列</th> 60 </tr> 61 </thead> 62 <tbody class="scrollContent"> 63 <tr> 64 <td>第一行第一列</td> 65 <td>第一行第二列</td> 66 <td>第一行第三列</td> 67 <td>第一行第四列</td> 68 <td>第一行第五列</td> 69 </tr> 70 <tr> 71 <td>第二行第一列</td> 72 <td>第二行第二列</td> 73 <td>第二行第三列</td> 74 <td>第二行第四列</td> 75 <td>第二行第五列</td> 76 </tr> 77 <tr> 78 <td>第三行第一列</td> 79 <td>第三行第二列</td> 80 <td>第三行第三列</td> 81 <td>第三行第四列</td> 82 <td>第三行第五列</td> 83 </tr> 84 <tr> 85 <td>第四行第一列</td> 86 <td>第四行第二列</td> 87 <td>第四行第三列</td> 88 <td>第四行第四列</td> 89 <td>第四行第五列</td> 90 </tr> 91 <tr> 92 <td>第五行第一列</td> 93 <td>第五行第二列</td> 94 <td>第五行第三列</td> 95 <td>第五行第四列</td> 96 <td>第五行第五列</td> 97 </tr> 98 <tr> 99 <td>第六行第一列</td> 100 <td>第六行第二列</td> 101 <td>第六行第三列</td> 102 <td>第六行第四列</td> 103 <td>第六行第五列</td> 104 </tr> 105 <tr> 106 <td>第七行第一列</td> 107 <td>第七行第二列</td> 108 <td>第七行第三列</td> 109 <td>第七行第四列</td> 110 <td>第七行第五列</td> 111 </tr> 112 <tr> 113 <td>第八行第一列</td> 114 <td>第八行第二列</td> 115 <td>第八行第三列</td> 116 <td>第八行第四列</td> 117 <td>第八行第五列</td> 118 </tr> 119 </tbody> 120 </table> 121 </div> 122 </body> 123 124 </html>
運行效果如下圖所示：