当前位置：Gxlcms > JavaScript > 表格头固定而列可滚动的效果

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

时间：2021-07-01 10:21:17 帮助过：9人阅读

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

<!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=[^\s\t\n]+/; 
                        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>

<table cellpadding="0" class="display-tb2" style="margin-top: 2px;" cellspacing="0" border="0" id="order"> 
    <tr> 
    <td> 
    <table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0"> 
        <thead> 
            <th class="fixed">选择</th> 
            <th>订单编号</th> 
            <th>订货日期</th> 
            <th>订货单位</th> 
            <th>订单类别</th> 
            <th>产品类别</th> 
            <th>版本号</th> 
            <th>订货金额</th> 
            <th>订单状态</th> 
        </thead> 
    </table> 
    </td> 
    </tr> 
     
    <tbody> 
    <tr class="odd"> 
    <td colspan="9"> 
     
    <table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0"> 
    <tbody id="order_GridBody_Cells"> 
    <tr class="even"> 
    <td width="30px" class="select-cell"> 
         <input type="checkbox" name="id" value="2" /></td> 
    <td class="odd_even">DJPH001</td> 
    <td class="odd_even">2005-02-02</td> 
    <td class="odd_even">19</td> 
    <td class="odd_even">直销</td> 
    <td class="odd_even">KIS</td> 
    <td class="odd_even">5</td> 
    <td class="odd_even">12.0000</td> 
    <td class="odd_even">已取消</td></tr> 
    <tr class="even"> 
    <td width="30px" class="select-cell"> 
           <input type="checkbox" name="id" value="3" /> </td> 
    <td class="odd_even">DJPH001</td> 
    <td class="odd_even">2005-02-02</td> 
    <td class="odd_even">19</td> 
    <td class="odd_even">购销</td> 
    <td class="odd_even">KIS</td> 
    <td class="odd_even">5</td> 
    <td class="odd_even">21.0000</td> 
    <td class="odd_even"> </td></tr> 
    <tr class="odd"> 
    <td width="30px" class="select-cell"> 
          <input type="checkbox" name="id" value="4" /> </td> 
    <td class="odd_even">DJPH889</td> 
    <td class="odd_even">2005-02-02</td> 
    <td class="odd_even">0</td> 
    <td class="odd_even">购销</td> 
    <td class="odd_even">KIS</td> 
    <td class="odd_even">5</td> 
    <td class="odd_even">21.0000</td> 
    <td class="odd_even">已取消</td></tr> 
    <tr class="even"> 
    <td width="30px" class="select-cell"> 
          <input type="checkbox" name="id" value="5" /> </td> 
    <td class="odd_even">DJPH889</td> 
    <td class="odd_even">2005-02-02</td> 
    <td class="odd_even">0</td> 
    <td class="odd_even">直销</td> 
    <td class="odd_even">KIS</td> 
    <td class="odd_even">5</td> 
    <td class="odd_even">1.0000</td> 
    <td class="odd_even"> </td></tr> 
    <tr class="odd"> 
    <td width="30px" class="select-cell"> 
          <input type="checkbox" name="id" value="6" /> </td> 
    <td class="odd_even">tytutyjh465456</td> 
    <td class="odd_even">2005-02-02</td> 
    <td class="odd_even">0</td> 
    <td class="odd_even">购销</td> 
    <td class="odd_even">KIS</td> 
    <td class="odd_even">0</td> 
    <td class="odd_even">21.0000</td> 
    <td class="odd_even">生产部已审核</td></tr> 
    <tr class="even"> 
    <td width="30px" class="select-cell"> 
          <input type="checkbox" name="id" value="7" /> </td> 
    <td class="odd_even">KDSZ2005050698</td> 
    <td class="odd_even">2005-05-05</td> 
    <td class="odd_even">-1</td> 
    <td class="odd_even">分销</td> 
    <td class="odd_even">KIS</td> 
    <td class="odd_even">10.2</td> 
    <td class="odd_even">21.0000</td> 
    <td class="odd_even">生产部已审核</td></tr> 
    <tr class="odd"> 
    <td width="30px" class="select-cell"> 
          <input type="checkbox" name="id" value="8" /> </td> 
    <td class="odd_even">KDSZ2005050698</td> 
    <td class="odd_even">2005-05-05</td> 
    <td class="odd_even">-1</td> 
    <td class="odd_even">分销</td> 
    <td class="odd_even">KIS</td> 
    <td class="odd_even">10.2</td> 
    <td class="odd_even">12.0000</td> 
    <td class="odd_even">总代已审核</td></tr> 
    <tr class="even"> 
    <td width="30px" class="select-cell"> 
          <input type="checkbox" name="id" value="9" /> </td> 
    <td class="odd_even">KDSZ2005050698</td> 
    <td class="odd_even">2005-05-05</td> 
    <td class="odd_even">-1</td> 
    <td class="odd_even">分销</td> 
    <td class="odd_even">KIS</td> 
    <td class="odd_even">10.2</td> 
    <td class="odd_even">32.0000</td> 
    <td class="odd_even">已取消</td></tr> 
    <tr class="odd"> 
    <td width="30px" class="select-cell"> 
         <input type="checkbox" name="id" value="10" /> </td> 
    <td class="odd_even">KDSZ2005050698</td> 
    <td class="odd_even">2005-05-05</td> 
    <td class="odd_even">-1</td> 
    <td class="odd_even">分销</td> 
    <td class="odd_even">KIS</td> 
    <td class="odd_even">10.2</td> 
    <td class="odd_even">12.0000</td> 
    <td class="odd_even"> </td></tr> 
    <tr class="even"> 
    <td width="30px" class="select-cell"> 
          <input type="checkbox" name="id" value="11" /> </td> 
    <td class="odd_even">KDSZ2005050698</td> 
    <td class="odd_even">2005-05-05</td> 
    <td class="odd_even">-1</td> 
    <td class="odd_even">分销</td> 
    <td class="odd_even">KIS</td> 
    <td class="odd_even">10.2</td> 
    <td class="odd_even">12.0000</td> 
    <td class="odd_even"> </td></tr> 
    <tr class="odd"> 
    <td width="30px" class="select-cell"> 
          <input type="checkbox" name="id" value="12" /> </td> 
    <td class="odd_even">KDSZ2005050698</td> 
    <td class="odd_even">2005-05-05</td> 
    <td class="odd_even">-1</td> 
    <td class="odd_even">分销</td> 
    <td class="odd_even">KIS</td> 
    <td class="odd_even">10.2</td> 
    <td class="odd_even">12.0000</td> 
    <td class="odd_even">已取消</td></tr> 
    <tr class="even"> 
    <td width="30px" class="select-cell"> 
          <input type="checkbox" name="id" value="13" /> </td> 
    <td class="odd_even">KDSZ2005050698</td> 
    <td class="odd_even">2005-05-05</td> 
    <td class="odd_even">-1</td> 
    <td class="odd_even">分销</td> 
    <td class="odd_even">KIS</td> 
    <td class="odd_even">10.2</td> 
    <td class="odd_even">12.0000</td> 
    <td class="odd_even">已取消</td></tr> 
    <tr class="odd"> 
    <td width="30px" class="select-cell"> 
          <input type="checkbox" name="id" value="14" /> </td> 
    <td class="odd_even">KDSZ2005050698</td> 
    <td class="odd_even">2005-05-05</td> 
    <td class="odd_even">-1</td> 
    <td class="odd_even">分销</td> 
    <td class="odd_even">KIS</td> 
    <td class="odd_even">10.2</td> 
    <td class="odd_even">12.0000</td> 
    <td class="odd_even">已取消</td></tr> 
    <tr class="even"> 
    <td width="30px" class="select-cell"> 
          <input type="checkbox" name="id" value="15" /> </td> 
    <td class="odd_even">KDSZ2005050698</td> 
    <td class="odd_even">2005-05-05</td> 
    <td class="odd_even">-1</td> 
    <td class="odd_even">分销</td> 
    <td class="odd_even">KIS</td> 
    <td class="odd_even">10.2</td> 
    <td class="odd_even">21.0000</td> 
    <td class="odd_even">已取消</td></tr> 
    <tr class="odd"> 
    <td width="30px" class="select-cell"> 
          <input type="checkbox" name="id" value="16" /> </td> 
    <td class="odd_even">KDSZ2005050698</td> 
    <td class="odd_even">2005-05-05</td> 
    <td class="odd_even">-1</td> 
    <td class="odd_even">分销</td> 
    <td class="odd_even">KIS</td> 
    <td class="odd_even">10.2</td> 
    <td class="odd_even">12.0000</td> 
    <td class="odd_even">已取消</td></tr> 
     
    </tbody> 
    </table> 
     
    </td> 
    </tr> 
    </tbody> 
    </table> 
     
 
</body> 
</html>

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

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

人气教程排行