固定table的表头

来源：互联网发布：零基础学算法pdf 编辑：程序博客网时间：2024/05/21 08:48

原贴：http://blog.csdn.net/qq378527566/article/details/7786126

另可参考：http://blog.csdn.net/sl1202/article/details/7314667 根据固定表头的两种方式

固定表头两种方式:

1. 表头和表内容分别在两个table中, 互不干扰.

优点: 实现简单

缺点: 两个table 的列宽不好保持一致, 缺乏灵活性

2. 用标签的属性来处理

[html] view plaincopy
<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>  

0 0