表格头固定而列可滚动的效果

发布时间：2007-11-22　作者：　来源：转载

标签：雪佛兰通用奢华劳斯莱斯旗舰版 64位收藏夹解调器

对于经常需要表格头部不东，而列表可以滚动，多用于数据比较多的情况，方便查看表格头固定而列可滚动的效果-脚本之家body{font-family:"arial","helvetica","sans-serif","";font-size:9pt;margin:0px;scrollbar-face-color:#efefe7;scrollbar-highli

对于经常需要表格头部不东，而列表可以滚动，多用于数据比较多的情况，方便查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>表格头固定而列可滚动的效果-全福编程网</title>
</head> 
<style type="text/css"> 
body {  
    font-family: "arial", "helvetica", "sans-serif", "";  
    font-size: 9pt;  
    margin: 0px; 
    scrollbar-face-color:#efefe7; 
    scrollbar-highlight-color:#ffffff; 
    scrollbar-3dlight-color:#a5a5a5; 
    scrollbar-darkshadow-color:#a5a5a5; 
    scrollbar-shadow-color:#d6d6ce; 
    scrollbar-arrow-color:#003184; 
    scrollbar-track-color:#deded6; 
    } 
table {  
    font-family: "arial", "helvetica", "sans-serif","";  
    font-size: 9pt;  
    line-height: 150%;  
    color: #000000; 
         } 
.display-tb2 
{ 
    border-right: #808080 1px solid;  
    border-top: #808080 1px solid;  
    border-left: #808080 1px solid;  
    border-bottom: #808080 1px solid; 
    border:0; 
    cellpadding:2; 
    cellspacing:0; 
    margin-top:2px; 
    border-collapse:collapse; 
} 
div.tableContainer 
{ 
    overflow-x:auto; 
    width:760px; 
    dyn-behavior:expression( 
        onscroll == null? 
            (onscroll = function(){ 
                if(event.srcElement.scrollLeft == event.srcElement.oldScroll) return; 
                var oGridBody = document.getElementById("order_GridBody"); 
                oGridBody.style.width = parseInt(event.srcElement.clientWidth) + event.srcElement.scrollLeft + "px"; 
                event.srcElement.oldScroll == event.srcElement.scrollLeft; 
            }):true, 
        onmousedown == null? 
            (onmousedown = function(){ 
                    if(self.currentTH != null) return; 
                    var obj = document.elementFromPoint(event.x,event.y); 
                    var objL = document.elementFromPoint(event.x - 1,event.y);

if(obj.tagName.toLowerCase() == "th")  
                    { 
                     
                        if(objL.tagName.toLowerCase() == "th") 
                        { 
                            obj = objL; 
                        } 
                        if(obj.className == "fixed") return; 
                        self.currentX = event.x; 
                        self.currentTH = obj.childNodes[0]; 
                        self.currentTH.setCapture(); 
                    } 
            }):true, 
        onmouseup == null? 
            (onmouseup = function(){ 
                    if(self.currentTH != null) 
                    { 
                        self.currentTH.releaseCapture(); 
                        self.currentTH = null; 
                    }     
            }):true, 
        onmousemove == null? 
            (onmousemove = function(){ 
                    if(self.currentTH != null) 
                    { 
                        var width = Math.round(parseInt(self.currentTH.clientWidth) + event.x - self.currentX); 
                        if(width < 0) width = 0; 
                        var dt = parseInt(self.currentTH.style.width) - width; 
                        self.currentTH.style.width = width; 
                        __resizeCell(self.currentTH.columnIndex,self.currentTH.style.width); 
                        self.currentX = event.x; 
                    } 
            }):true, 
        self.__resizeCell == null? 
            (self.__resizeCell = function(idx, width){ 
                    var cells = document.getElementById("order_GridBody_Cells"); 
                    var rows = cells.childNodes; 
                    var i = 0; 
                    for (var i = 0; i < rows.length; i++) 
                    { 
                        var cell = rows[i].childNodes[idx].childNodes[0]; 
                        var resetPattern = /style=[^stn]+/; 
                        cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" +width + "'"); 
                    } 
            }):true 
    ) 
} 
div.bodyContainer 
{ 
    height:250px; 
    width:760px; 
    overflow-x:hidden; 
    overflow-y:auto; 
} 
div.gridCell_standard 
{ 
    width:100px; 
    overflow:hidden; 
    nw:expression(this.noWrap=true); 
    margin-left: 0px; 
    margin-right: 1px; 
    padding-left: 2px; 
    cursor:default; 
} 
div.gridCell_narrow 
{ 
    width:30px; 
    overflow:hidden; 
    margin-left: 0px; 
    margin-right: 1px; 
    padding-left: 2px; 
    nw:expression(this.noWrap=true); 
    cursor:default; 
} 
th  
{ 
    border-right: #a4a6a4 1px solid;  
    border-top: #a4a6a4 1px solid;  
    border-left: #a4a6a4 1px solid;  
    border-bottom: #a4a6a4 1px solid; 
    background-image: url(images/default/headerbg.gif); 
                color:#ffffff; 
    font-style:normal; 
    font-weight:normal; 
    height:20px; 
    cursor:col-resize; 
    dyn-behavior:expression( 
        ondblclick == null? 
            (ondblclick = function() 
            { 
                var src = event.srcElement; 
                if(event.srcElement.tagName.toLowerCase()!="div") 
                { 
                    src = src.childNodes[0]; 
                } 
                src.style.width = ""; 
                __resizeCell(src.columnIndex,src.clientWidth); 
            }):true 
    ) 
} 
th.fixed 
{ 
    border-right: #a4a6a4 1px solid;  
    border-top: #a4a6a4 1px solid;  
    border-left: #a4a6a4 1px solid;  
    border-bottom: #a4a6a4 1px solid; 
    background-image: url(images/default/headerbg.gif); 
                color:#ffffff; 
    font-style:normal; 
    font-weight:normal; 
    height:20px; 
    cursor:default; 
} 
tr.odd  
{ 
  border-right: #a4a6a4 1px solid;  
    border-top: #a4a6a4 0px solid;  
    border-left: #a4a6a4 0px solid;  
    border-bottom: #a4a6a4 1px solid; 
    noWrap; 
} 
tr.even  
{ 
  border-right: #a4a6a4 1px solid;  
    border-top: #a4a6a4 0px solid;  
    border-left: #a4a6a4 0px solid;  
    border-bottom: #a4a6a4 1px solid; 
} 
td.odd_even 
{ 
  border-right: #a4a6a4 1px solid;  
    border-top: #a4a6a4 1px solid;  
    border-left: #a4a6a4 1px solid;  
    border-bottom: #a4a6a4 1px solid; 
    noWrap; 
} 
td.select-cell 
{ 
  border-right: #a4a6a4 1px solid;  
    border-top: #a4a6a4 1px solid;  
    border-left: #a4a6a4 1px solid;  
    border-bottom: #a4a6a4 1px solid; 
} 
th{ 
  color:#ff0000; 
} 
</style>

<thead> 
            <th class="fixed">选择</th> 
            <th>订单编号</th> 
            <th>订货日期</th> 
            <th>订货单位</th> 
            <th>订单类别</th> 
            <th>产品类别</th> 
            <th>版本号</th> 
            <th>订货金额</th> 
            <th>订单状态</th> 
        </thead> 
     
     
     
     
     
     
     
     
     
     
     
     
         <input type="checkbox" name="id" value="2" /> 
    DJPH001 
    2005-02-02 
    19 
    直销 
    KIS 
    5 
    12.0000 
    已取消 
     
     
           <input type="checkbox" name="id" value="3" />  
    DJPH001 
    2005-02-02 
    19 
    购销 
    KIS 
    5 
    21.0000 
      
     
     
          <input type="checkbox" name="id" value="4" />  
    DJPH889 
    2005-02-02 
    0 
    购销 
    KIS 
    5 
    21.0000 
    已取消 
     
     
          <input type="checkbox" name="id" value="5" />  
    DJPH889 
    2005-02-02 
    0 
    直销 
    KIS 
    5 
    1.0000 
      
     
     
          <input type="checkbox" name="id" value="6" />  
    tytutyjh465456 
    2005-02-02 
    0 
    购销 
    KIS 
    0 
    21.0000 
    生产部已审核 
     
     
          <input type="checkbox" name="id" value="7" />  
    KDSZ2005050698 
    2005-05-05 
    -1 
    分销 
    KIS 
    10.2 
    21.0000 
    生产部已审核 
     
     
          <input type="checkbox" name="id" value="8" />  
    KDSZ2005050698 
    2005-05-05 
    -1 
    分销 
    KIS 
    10.2 
    12.0000 
    总代已审核 
     
     
          <input type="checkbox" name="id" value="9" />  
    KDSZ2005050698 
    2005-05-05 
    -1 
    分销 
    KIS 
    10.2 
    32.0000 
    已取消 
     
     
         <input type="checkbox" name="id" value="10" />  
    KDSZ2005050698 
    2005-05-05 
    -1 
    分销 
    KIS 
    10.2 
    12.0000 
      
     
     
          <input type="checkbox" name="id" value="11" />  
    KDSZ2005050698 
    2005-05-05 
    -1 
    分销 
    KIS 
    10.2 
    12.0000 
      
     
     
          <input type="checkbox" name="id" value="12" />  
    KDSZ2005050698 
    2005-05-05 
    -1 
    分销 
    KIS 
    10.2 
    12.0000 
    已取消 
     
     
          <input type="checkbox" name="id" value="13" />  
    KDSZ2005050698 
    2005-05-05 
    -1 
    分销 
    KIS 
    10.2 
    12.0000 
    已取消 
     
     
          <input type="checkbox" name="id" value="14" />  
    KDSZ2005050698 
    2005-05-05 
    -1 
    分销 
    KIS 
    10.2 
    12.0000 
    已取消 
     
     
          <input type="checkbox" name="id" value="15" />  
    KDSZ2005050698 
    2005-05-05 
    -1 
    分销 
    KIS 
    10.2 
    21.0000 
    已取消 
     
     
          <input type="checkbox" name="id" value="16" />  
    KDSZ2005050698 
    2005-05-05 
    -1 
    分销 
    KIS 
    10.2 
    12.0000 
    已取消 
     
     
     
     
     
     
     
     
     
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

上一篇：document.designMode的功能与使用方法介绍

下一篇：javascript(js) join函数使用方法介绍

广告商业广告，理性选择

网站首页

网络编程

数据库

操作系统

平面设计

网站运营

网络安全

电脑相关

手机学院

表格头固定而列可滚动的效果

相关推荐

文章分类

热门关键词

热门文章

最新更新