html中表格table冻结行和列

时间:2022-11-20 11:23:32


html中表格table冻结行和列



    <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>  


 以上第一种方式摘自:http://hi.baidu.com/zouyou626/item/b50ece1615bf0b781009b5c6


 


 


 


下面开始第二种方式:
Html代码  收藏代码


            <html>  
                    <head>  
                        <title>表格行列冻结示例</title>  
                        <meta http-equiv="Content-Type" content="text/html; charset=GBK">  
                        <style>  
                            td  
                            {  
                                height:30px;  
                                width:180px;  
                            }  
                        </style>          
                    </head>  
                    <body>  
                        <div style="OVERFLOW: scroll;width:100%;height:140px;">  
                            <table id="oFrozenTable" border="1" cellspacing="1" cellpadding="0" bordercolor="#74c6f5" width="900" bgcolor="#ffffff">  
                                <tr>  
                                    <td nowrap>第一列</td>  
                                    <td nowrap>第二列</td>  
                                    <td nowrap>第三列</td>  
                                    <td nowrap>第四列</td>  
                                    <td nowrap>第无列</td>  
                                    <td nowrap>第六列</td>  
                                    <td nowrap>第七列</td>  
                                    <td nowrap>第八列</td>  
                                </tr>  
                                <tr>  
                                    <td nowrap>第一行</td>  
                                    <td nowrap>1.1</td>  
                                    <td nowrap>1.2</td>  
                                    <td nowrap>1.3</td>  
                                    <td nowrap>1.4</td>  
                                    <td nowrap>1.5</td>  
                                    <td nowrap>1.6</td>  
                                    <td nowrap>1.7</td>  
                                </tr>  
                                <tr>  
                                    <td nowrap>第二行</td>  
                                    <td nowrap>2.1</td>  
                                    <td nowrap>2.2</td>  
                                    <td nowrap>2.3</td>  
                                    <td nowrap>2.4</td>  
                                    <td nowrap>2.5</td>  
                                    <td nowrap>2.6</td>  
                                    <td nowrap>2.7</td>  
                                </tr>  
                                <tr>  
                                    <td nowrap>第三行</td>  
                                    <td nowrap>3.1</td>  
                                    <td nowrap>3.2</td>  
                                    <td nowrap>3.3</td>  
                                    <td nowrap>3.4</td>  
                                    <td nowrap>3.5</td>  
                                    <td nowrap>3.6</td>  
                                    <td nowrap>3.7</td>  
                                </tr>  
                                <tr>  
                                    <td nowrap>第四行</td>  
                                    <td nowrap>4.1</td>  
                                    <td nowrap>4.2</td>  
                                    <td nowrap>4.3</td>  
                                    <td nowrap>4.4</td>  
                                    <td nowrap>4.5</td>  
                                    <td nowrap>4.6</td>  
                                    <td nowrap>4.7</td>  
                                </tr>  
                            </table>  
                        </div>  
                        <script language="javascript" src="frozenTable.js"></script>  
                        <script language="javascript">  
                            FrozenTable(oFrozenTable, 1, 1, 1);  
      
                            function FrozenTable(oFrozenTable, iFrozenRowHead, iFrozenRowFoot, iFrozenColLeft)  
    {  
            oFrozenTable.HeadRow = iFrozenRowHead;  
            var oDivMaster = oFrozenTable.parentElement;  
            if(oDivMaster.tagName != 'DIV') return;  
            if((oFrozenTable.offsetHeight > oDivMaster.offsetHeight) && (oFrozenTable.offsetWidth > oDivMaster.offsetWidth))  
            {  
                    //创建并克隆LeftHead表格  
                    if((iFrozenColLeft > 0) && (iFrozenRowHead > 0))  
                    {  
                            var oTableLH = document.createElement("TABLE");  
                            var newTBody = document.createElement("TBODY");  
                            oTableLH.insertBefore(newTBody);  
                            oTableLH.id = "oTableLH";  
                            oDivMaster.parentElement.insertBefore(oTableLH);  
                            CloneTable(oFrozenTable, oTableLH, 0, iFrozenRowHead, iFrozenColLeft)  
                            oTableLH.srcTable = oFrozenTable;  
                            with(oTableLH.style)  
                            {  
                                    zIndex = 804;  
                                    position = 'absolute'  
                                    pixelLeft = oDivMaster.offsetLeft;  
                                    pixelTop = oDivMaster.offsetTop;  
                            }  
                    }  
      
                    //创建并克隆LeftFoot表格  
                    if((iFrozenColLeft > 0) && (iFrozenRowFoot > 0))  
                    {  
                            var oTableLF = document.createElement("TABLE");  
                            var newTBody = document.createElement("TBODY");  
                            oTableLF.insertBefore(newTBody);  
                            oTableLF.id = "oTableLF";  
                            oDivMaster.parentElement.insertBefore(oTableLF);  
                            CloneTable(oFrozenTable, oTableLF,oFrozenTable.rows.length - iFrozenRowFoot, oFrozenTable.rows.length, iFrozenColLeft)  
                            oTableLF.srcTable = oFrozenTable;  
                            with(oTableLF.style)  
                            {  
                                    zIndex = 803;  
                                    position = 'absolute'  
                                    pixelLeft = oDivMaster.offsetLeft;  
                                    pixelTop = oDivMaster.offsetTop + oDivMaster.offsetHeight - oTableLF.offsetHeight - 16;  
                            }  
                    }  
            }  
              
            //创建DivHead、创建并克隆HeadTar表格  
            if((iFrozenRowHead > 0) && (oFrozenTable.offsetHeight > oDivMaster.offsetHeight))  
            {  
                    var DivHead = document.createElement("DIV");  
                    oDivMaster.parentElement.insertBefore(DivHead);  
                    var oTableHead = document.createElement("TABLE");  
                    var newTBody = document.createElement("TBODY");  
                    oTableHead.id = "HeadTar";  
                    oTableHead.style.position = "relative"  
                    oTableHead.insertBefore(newTBody);  
                    DivHead.insertBefore(oTableHead);  
                    CloneTable(oFrozenTable, oTableHead, 0, iFrozenRowHead, -1)  
                    HeadTar.srcTable = oFrozenTable;  
                    with(DivHead.style)  
                    {  
                            overflow = "hidden";  
                            zIndex = 802;  
                            pixelWidth = oDivMaster.offsetWidth - 16  
                            position = 'absolute';  
                            pixelLeft = oDivMaster.offsetLeft;  
                            pixelTop = oDivMaster.offsetTop;  
                    }  
            }  
              
            //创建DivFoot、创建并克隆FootTar表格  
            if((iFrozenRowFoot > 0) && (oFrozenTable.offsetHeight > oDivMaster.offsetHeight))  
            {  
                    var DivFoot = document.createElement("DIV");  
                    oDivMaster.parentElement.insertBefore(DivFoot);  
                    var oTableFoot = document.createElement("TABLE");  
                    var newTBody = document.createElement("TBODY");  
                    oTableFoot.insertBefore(newTBody);  
                    oTableFoot.id = "FootTar";  
                    oTableFoot.style.position = "relative"  
                    DivFoot.insertBefore(oTableFoot);  
                    CloneTable(oFrozenTable, oTableFoot, oFrozenTable.rows.length - iFrozenRowFoot, oFrozenTable.rows.length, -1)  
                    oTableFoot.srcTable = oFrozenTable;  
                    with(DivFoot.style)  
                    {  
                            overflow = "hidden";  
                            zIndex = 801;  
                            pixelWidth = oDivMaster.offsetWidth - 16  
                            position = 'absolute'  
                            pixelLeft = oDivMaster.offsetLeft;  
                            pixelTop = oDivMaster.offsetTop + oDivMaster.offsetHeight - DivFoot.offsetHeight - 16;  
                    }  
            }  
      
            //创建DivLeft、创建并克隆LeftTar表格  
            if((iFrozenColLeft > 0) && (oFrozenTable.offsetWidth > oDivMaster.offsetWidth))  
            {  
                    var DivLeft = document.createElement("DIV");  
                    oDivMaster.parentElement.insertBefore(DivLeft);  
                    var oTableLeft = document.createElement("TABLE");  
                    var newTBody = document.createElement("TBODY");  
                    oTableLeft.insertBefore(newTBody);  
                    oTableLeft.id = "LeftTar";  
                    oTableLeft.style.position = "relative";  
                    DivLeft.insertBefore(oTableLeft);  
                    CloneTable(oFrozenTable, oTableLeft, 0, oFrozenTable.rows.length, iFrozenColLeft)  
                    LeftTar.srcTable = oFrozenTable;  
                    with(DivLeft.style)  
                    {  
                            overflow = "hidden";  
                            zIndex = 800;  
                            pixelWidth = oDivMaster.offsetWidth - 16  
                            pixelHeight = oDivMaster.offsetHeight - 16  
                            position = 'absolute'  
                            pixelLeft = oDivMaster.offsetLeft;  
                            pixelTop = oDivMaster.offsetTop;  
                    }  
            }  
              
            //为主DIV附加onscroll事件  
            oDivMaster.attachEvent("onscroll", DivMasterScroll);  
    }  
      
    //+----------------------------------------------------------------------------  
    //  
    //功能描述:克隆表格  
    //  
    //输入参数:oSrcTable        源表格  
    //            oNewTable        新表格  
    //            iRowStart        克隆开始行  
    //            iRowEnd            克隆结束行  
    //            iColumnEnd        克隆结束列  
    //  
    //-----------------------------------------------------------------------------  
    function CloneTable(oSrcTable, oNewTable, iRowStart, iRowEnd, iColumnEnd)  
    {  
            //循环控制参数  
            var i, j, k = 0;  
              
            //新增行、列              
            var newTR, newTD;  
              
            //新表格宽度、高度              
            var iWidth = 0, iHeight = 0;  
              
            //拷贝Attributes、events and styles  
            oNewTable.mergeAttributes(oSrcTable);      
              
            //循环克隆指定行  
            for (i = iRowStart; i < iRowEnd; i++)  
            {  
                    newTR = oNewTable.insertRow(k);  
                      
                    //拷贝Attributes、events and styles  
                    newTR.mergeAttributes(oSrcTable.rows[i]);      
                    iHeight += oSrcTable.rows[i].offsetHeight;  
                    iWidth = 0;  
                      
                    //循环克隆指定列  
                    for(j = 0; j < (iColumnEnd == -1 ? oSrcTable.rows[i].cells.length: iColumnEnd); j++)  
                    {  
                            newTD = oSrcTable.rows[i].cells[j].cloneNode(true);  
                            iWidth += oSrcTable.rows[i].cells[j].offsetWidth;  
                            newTR.insertBefore(newTD);  
                            newTD.style.pixelWidth = oSrcTable.rows[i].cells[j].offsetWidth;  
                    }  
                    k++;  
            }  
            oNewTable.style.pixelWidth = iWidth;  
            oNewTable.style.pixelHeight = iHeight;  
    }  
      
    //+----------------------------------------------------------------------------  
    //  
    //  功能描述:主DIV的onscroll事件  
    //  
    //  输入参数:无  
    //  
    //-----------------------------------------------------------------------------  
    function DivMasterScroll()  
    {  
        var oDivMaster = window.event.srcElement;  
        if(document.getElementById('HeadTar') != null)  
        {  
            document.getElementById('HeadTar').style.pixelLeft = - oDivMaster.scrollLeft;  
        }  
        if(document.getElementById('FootTar') != null)      
        {  
            document.all('FootTar').style.pixelLeft = - oDivMaster.scrollLeft;  
        }  
        if(document.getElementById('LeftTar') != null)      
        {  
            document.all('LeftTar').style.pixelTop = - oDivMaster.scrollTop;  
        }  
    }  
                        </script>  
                    </body>  
                </html>  


 这个第二种方式摘自:http://blog.csdn.net/jiacky/article/details/1746976


 


 
分享到:
Set集合下的子类HashSet、TreeSet


    2014-06-09 22:41
    浏览 2075
    评论(0)
    分类:Web前端
    相关推荐


评论
发表评论


您还没有登录,请您登录后再发表评论
LiYinlei的博客
LiYinlei


    浏览: 5517 次
    性别: Icon_minigender_1
    来自: 北京


最近访客 更多访客>>
dylinshi126的博客
dylinshi126
huhongguang的博客
huhongguang
wangzhen1984815的博客
wangzhen1984815
zhujs的博客
zhujs
文章分类


    全部博客 (11)
    java基础 (10)
    html (1)


社区版块


    我的资讯 (0)
    我的论坛 (0)
    我的问答 (0)


存档分类


    2014-06 (1)
    2014-04 (1)
    2014-03 (9)
    更多存档...


最新评论