原贴: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>