原貼：http://blog.csdn.net/qq378527566/article/details/7786126
另可參考：http://blog.csdn.net/sl1202/article/details/7314667 根據固定表頭的兩種方式
固定表頭兩種方式:
1. 表頭和表內容分別在兩個table中, 互不干擾.
優點: 實現簡單
缺點: 兩個table 的列寬不好保持一致, 缺乏靈活性
2. 用標籤的屬性來處理
- <span style="font-size:18px;"><html>
- <head>
- <style type="text/css">
- /*重點：固定行頭樣式*/
- .scrollRowThead
- {
- position: relative;
- left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);
- z-index:0;
- }
- /*重點：固定表頭樣式*/
- .scrollColThead {
- position: relative;
- top: expression(this.parentElement.parentElement.parentElement.scrollTop);
- z-index:2;
- }
- /*行列交叉的地方*/
- .scrollCR {
- z-index:3;
- }
- /*表格的線*/
- .scrolltable
- {
- border-bottom:1px solid #CCCCCC;
- border-right:1px solid #CCCCCC;
- }
- /*單元格的線等*/
- .scrolltable td,.scrollTable th
- {
- border-left: 1px solid #CCCCCC;
- border-top: 1px solid #CCCCCC;
- padding: 5px;
- }
- </style>
- </head>
- <body>
- <div style="height:200px; width:200px; border: 1px solid blue; overflow-y:auto; ">
- <table border="0" cellpadding="3" cellspacing="0" class="scrolltable">
- <tr class="scrollColThead" style="background-color:green;"><th class="scrollRowThead scrollCR">lie1</th><th>lie1</th></tr>
- <tr><td class="scrollRowThead">content</td><td>content</td></tr>
- <tr><td>content</td><td>content</td></tr>
- <tr><td>content</td><td>content</td></tr>
- <tr><td>content</td><td>content</td></tr>
- <tr><td>content</td><td>content</td></tr>
- <tr><td>content</td><td>content</td></tr>
- <tr><td>content</td><td>content</td></tr>
- <tr><td>content</td><td>content</td></tr>
- <tr><td>content</td><td>content</td></tr>
- <tr><td>content</td><td>content</td></tr>
- </table>
- </div>
- </body>
- </html>
- </span>