注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天边云E家 shaoruisky

IT博文共享,知识的海洋

 
 
 

日志

 
 

table 冻结列和行  

2013-11-20 13:27:49|  分类: 网页设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>完美冻结列和行 </title>
    <style type="text/css">
        .FixedHeaderColumnsTableDiv
        {
            overflow: auto;
            position: relative;
        }
        .FixedCell
        {
            position: relative;
            top: expression(this.offsetParent.scrollTop);
            left: expression(this.parentElement.offsetParent.scrollLeft);
            z-index: 1800;
        }
        .FixedHeaderRow1
        {
            position: relative;
            top: expression(this.offsetParent.scrollTop);
            background-color: #ccc;
            z-index: 300;
        }
        .FixedHeaderRow2
        {
            position: relative;
            top: expression(this.offsetParent.scrollTop);
            z-index: 290;
            background-color:#ffccff;
        }
        .FixedDataColumn
        {
            position: relative;
            left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
            z-index: 200;
            background-color: Aqua;
        }
    </style>
</head>
<body>
    <div class="FixedHeaderColumnsTableDiv" style="width: 1000px; height: 100px">
        <table border="0" cellpadding="0" cellspacing="0" width="1200px">
            <tr class="FixedHeaderRow1">
                <td class="FixedCell" style="width: 80px">
                    header1
                </td>
                <td class="FixedCell" style="width: 80px">
                    header2
                </td>
                <td class="FixedCell" style="width: 80px">
                    header3
                </td>
                <td class="FixedCell" style="width: 80px">
                    header4
                </td>
                <td style="width: 80px">
                    header5
                </td>
                <td style="width: 80px">
                    header6
                </td>
                <td style="width: 80px">
                    header7
                </td>
                <td style="width: 80px">
                    header8
                </td>
                <td style="width: 80px">
                    header9
                </td>
                <td style="width: 80px">
                    header10
                </td>
            </tr>
            <tr class="FixedHeaderRow2">
                <td class="FixedCell" style="width: 80px" align="center">
                    ss
                </td>
                <td class="FixedCell" style="width: 80px" align="center">
                    ss
                </td>
                <td class="FixedCell" style="width: 80px">
                    header16
                </td>
                <td class="FixedHeaderColumn1" colspan="7" align="center">
                    header17dddddddddddd
                </td>
            </tr>
            <tr>
                <td class="FixedDataColumn">
                    col1
                </td>
                <td class="FixedDataColumn">
                    col2
                </td>
                <td class="FixedDataColumn">
                    col3
                </td>
                <td class="FixedDataColumn">
                    col4
                </td>
                <td>
                    col5
                </td>
                <td>
                    col6
                </td>
                <td>
                    col7
                </td>
                <td>
                    col8
                </td>
                <td>
                    col9
                </td>
                <td>
                    col10
                </td>
            </tr>
            <tr>
                <td class="FixedDataColumn">
                    col1
                </td>
                <td class="FixedDataColumn">
                    col2
                </td>
                <td class="FixedDataColumn">
                    col3
                </td>
                <td class="FixedDataColumn">
                    col4
                </td>
                <td>
                    col5
                </td>
                <td>
                    col6
                </td>
                <td>
                    col7
                </td>
                <td>
                    col8
                </td>
                <td>
                    col9
                </td>
                <td>
                    col10
                </td>
            </tr>
            <tr>
                <td class="FixedDataColumn">
                    col1
                </td>
                <td class="FixedDataColumn">
                    col2
                </td>
                <td class="FixedDataColumn">
                    col3
                </td>
                <td class="FixedDataColumn">
                    col4
                </td>
                <td>
                    col5
                </td>
                <td>
                    col6
                </td>
                <td>
                    col7
                </td>
                <td>
                    col8
                </td>
                <td>
                    col9
                </td>
                <td>
                    col10
                </td>
            </tr>
            <tr>
                <td class="FixedDataColumn">
                    col1
                </td>
                <td class="FixedDataColumn">
                    col2
                </td>
                <td class="FixedDataColumn">
                    col3
                </td>
                <td class="FixedDataColumn">
                    col4
                </td>
                <td>
                    col5
                </td>
                <td>
                    col6
                </td>
                <td>
                    col7
                </td>
                <td>
                    col8
                </td>
                <td>
                    col9
                </td>
                <td>
                    col10
                </td>
            </tr>
            <tr>
                <td class="FixedDataColumn">
                    col1
                </td>
                <td class="FixedDataColumn">
                    col2
                </td>
                <td class="FixedDataColumn">
                    col3
                </td>
                <td class="FixedDataColumn">
                    col4
                </td>
                <td>
                    col5
                </td>
                <td>
                    col6
                </td>
                <td>
                    col7
                </td>
                <td>
                    col8
                </td>
                <td>
                    col9
                </td>
                <td>
                    col10
                </td>
            </tr>
            <tr>
                <td class="FixedDataColumn">
                    col1
                </td>
                <td class="FixedDataColumn">
                    col2
                </td>
                <td class="FixedDataColumn">
                    col3
                </td>
                <td class="FixedDataColumn">
                    col4
                </td>
                <td>
                    col5
                </td>
                <td>
                    col6
                </td>
                <td>
                    col7
                </td>
                <td>
                    col8
                </td>
                <td>
                    col9
                </td>
                <td>
                    col10
                </td>
            </tr>
            <tr>
                <td class="FixedDataColumn">
                    col1
                </td>
                <td class="FixedDataColumn">
                    col2
                </td>
                <td class="FixedDataColumn">
                    col3
                </td>
                <td class="FixedDataColumn">
                    col4
                </td>
                <td>
                    col5
                </td>
                <td>
                    col6
                </td>
                <td>
                    col7
                </td>
                <td>
                    col8
                </td>
                <td>
                    col9
                </td>
                <td>
                    col10
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

  评论这张
 
阅读(262)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016